Fix styling login page

src/lib/images/github-education-program/appwrite-logo.svg

@@ -1,13 +0,0 @@
-<svg width="132" height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M38.5563 19.4952C40.7152 19.4952 41.8065 18.382 42.281 17.624H42.4946C42.5895 18.4294 43.1589 19.1873 44.2739 19.1873H46.3854V16.8187H45.8397C45.4601 16.8187 45.2703 16.6055 45.2703 16.2739V6.77589H42.4708V8.29179H42.2573C41.7116 7.53384 40.5729 6.46798 38.4851 6.46798C35.1637 6.46798 32.6963 9.21554 32.6963 12.9816C32.6963 16.7477 35.2111 19.4952 38.5563 19.4952ZM39.0545 16.795C37.0853 16.795 35.5432 15.3502 35.5432 13.0053C35.5432 10.7078 37.0379 9.14449 39.0308 9.14449C40.9287 9.14449 42.5183 10.542 42.5183 13.0053C42.5183 15.1133 41.166 16.795 39.0545 16.795Z" fill="#EDEDF0"/>
-    <path d="M48.0382 24H50.8377V17.624H51.0513C51.5732 18.382 52.6883 19.4952 54.8947 19.4952C58.2161 19.4952 60.636 16.7003 60.636 12.9816C60.636 9.23923 58.05 6.46798 54.7049 6.46798C52.5696 6.46798 51.5258 7.62859 51.0275 8.26811H50.814V6.77589H48.0382V24ZM54.3015 16.8661C52.3799 16.8661 50.7903 15.4449 50.7903 12.9816C50.7903 10.8736 52.1426 9.09711 54.2541 9.09711C56.2232 9.09711 57.7653 10.6367 57.7653 12.9816C57.7653 15.2791 56.2707 16.8661 54.3015 16.8661Z" fill="#EDEDF0"/>
-    <path d="M62.0806 24H64.8801V17.624H65.0936C65.6156 18.382 66.7306 19.4952 68.937 19.4952C72.2585 19.4952 74.4477 16.7003 74.4477 12.9816C74.4477 9.23923 72.0924 6.46798 68.7472 6.46798C66.612 6.46798 65.5681 7.62859 65.0699 8.26811H64.8564V6.77589H62.0806V24ZM68.3439 16.8661C66.4222 16.8661 64.8326 15.4449 64.8326 12.9816C64.8326 10.8736 66.1849 9.09711 68.2964 9.09711C70.2656 9.09711 71.8077 10.6367 71.8077 12.9816C71.8077 15.2791 70.313 16.8661 68.3439 16.8661Z" fill="#EDEDF0"/>
-    <path d="M78.1484 19.4755H82.1104L84.3642 9.74061H84.5066L86.7604 19.4755H90.6987L93.8524 7.0641H91.0308L88.777 16.8227H88.5635L86.3096 7.0641H82.5849L80.3073 16.8227H80.0938L77.8637 7.0641H74.8744L78.1484 19.4755Z" fill="#EDEDF0"/>
-    <path d="M95.2706 19.4755H98.0701V13.3409C98.0701 10.996 99.1615 9.55112 101.202 9.55112H102.435V6.75619H101.51C99.9207 6.75619 98.7107 7.84574 98.2362 8.88792H98.0464V7.0641H95.2706V19.4755Z" fill="#EDEDF0"/>
-    <path d="M116.328 19.4755H118.511V16.9885H116.352C115.498 16.9885 115.142 16.6095 115.142 15.7331V9.52744H118.653V7.0641H115.142V3.58228H112.485V7.0641H110.16V9.52744H112.319V15.7568C112.319 18.386 113.908 19.4755 116.328 19.4755Z" fill="#EDEDF0"/>
-    <path d="M126.021 19.4952C128.607 19.4952 130.885 18.2162 131.691 15.6344L129.129 15.0186C128.678 16.3924 127.374 17.103 125.998 17.103C123.957 17.103 122.605 15.7765 122.581 13.6922H132V12.9105C132 9.21554 129.699 6.46798 125.903 6.46798C122.557 6.46798 119.687 9.09711 119.687 13.0053C119.687 16.795 122.225 19.4952 126.021 19.4952ZM122.605 11.6552C122.771 10.163 124.123 8.90763 125.903 8.90763C127.611 8.90763 129.011 9.97349 129.153 11.6552H122.605Z" fill="#EDEDF0"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M108.915 19.4755H106.115V9.52744H103.933V7.0641H108.915V19.4755Z" fill="#EDEDF0"/>
-    <path d="M107.307 5.34169C108.327 5.34169 109.087 4.58374 109.087 3.58893C109.087 2.61781 108.327 1.85986 107.307 1.85986C106.287 1.85986 105.528 2.61781 105.528 3.58893C105.528 4.58374 106.287 5.34169 107.307 5.34169Z" fill="#EDEDF0"/>
-    <path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#FD366E"/>
-    <path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#FD366E"/>
-</svg>

src/lib/images/github-logo-light.svg

@@ -0,0 +1,4 @@
+<svg width="99" height="24" viewBox="0 0 99 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.372 0C5.52847 0 0 5.49518 0 12.2975C0 17.7393 3.54251 22.3542 8.45373 23.9814C9.07098 24.0881 9.31252 23.7146 9.31252 23.3945C9.31252 23.1011 9.28568 22.1408 9.28568 21.1004C6.17256 21.6606 5.36745 20.3535 5.12591 19.66C4.99172 19.3132 4.37447 18.2195 3.86456 17.926C3.43517 17.686 2.81791 17.1258 3.83772 17.0991C4.80386 17.0724 5.50163 17.9794 5.74317 18.3528C6.87033 20.2201 8.64159 19.6866 9.33936 19.3665C9.4467 18.5662 9.76875 18.0327 10.1176 17.7126C7.3534 17.3925 4.48182 16.3522 4.48182 11.6306C4.48182 10.2968 4.96489 9.17642 5.74317 8.3228C5.60898 8.00269 5.17959 6.74894 5.87735 5.06837C5.87735 5.06837 6.92401 4.74827 9.28568 6.32213C10.2787 6.05537 11.3253 5.89532 12.372 5.89532C13.4186 5.89532 14.4653 6.0287 15.4582 6.32213C17.8199 4.72159 18.8666 5.06837 18.8666 5.06837C19.5375 6.74894 19.1081 8.02937 19.0008 8.3228C19.779 9.17642 20.2621 10.2701 20.2621 11.6306C20.2621 16.3522 17.3637 17.3925 14.5995 17.7126C15.0557 18.0861 15.4314 18.833 15.4314 19.9801C15.4314 21.634 15.4046 22.9411 15.4046 23.3679C15.4046 23.688 15.6461 24.0881 16.2634 23.9547C21.1477 22.3275 24.6903 17.7126 24.6903 12.2708C24.7708 5.49518 19.2155 0 12.372 0Z" fill="#1B1F24"/>
+    <path d="M59.4711 17.8993H59.4443C59.4711 17.8993 59.4711 17.8993 59.4711 17.8993ZM59.4711 17.8993C59.337 17.8993 58.9881 17.9793 58.6124 17.9793C57.4315 17.9793 57.029 17.4458 57.029 16.7523V12.084H59.4175C59.5517 12.084 59.659 11.9773 59.659 11.7906V9.25641C59.659 9.12303 59.5517 9.01633 59.4175 9.01633H57.029V5.89528C57.029 5.78858 56.9484 5.70855 56.8143 5.70855H53.5938C53.4596 5.70855 53.3791 5.78858 53.3791 5.89528V9.12303C53.3791 9.12303 51.742 9.52317 51.6347 9.54984C51.5273 9.57652 51.4468 9.68322 51.4468 9.78993V11.8173C51.4468 11.9773 51.5542 12.1107 51.6884 12.1107H53.3523V16.9923C53.3523 20.6202 55.9018 20.9937 57.6462 20.9937C58.4513 20.9937 59.3906 20.7536 59.5517 20.6736C59.6322 20.6469 59.6858 20.5402 59.6858 20.4335V18.1928C59.7127 18.0327 59.6053 17.926 59.4711 17.8993ZM94.95 14.6449C94.95 11.9507 93.8496 11.6039 92.6956 11.7106C91.81 11.7639 91.0854 12.2174 91.0854 12.2174V17.4458C91.0854 17.4458 91.81 17.9527 92.9103 17.9793C94.4669 18.0327 94.95 17.4725 94.95 14.6449ZM98.5998 14.4048C98.5998 19.4999 96.9359 20.967 94.0375 20.967C91.5953 20.967 90.2534 19.7399 90.2534 19.7399C90.2534 19.7399 90.1998 20.4335 90.1193 20.5135C90.0656 20.5936 90.0119 20.6202 89.9046 20.6202H87.6771C87.5161 20.6202 87.3819 20.5135 87.3819 20.3802L87.4087 3.84126C87.4087 3.70788 87.5161 3.60118 87.6502 3.60118H90.8439C90.9781 3.60118 91.0854 3.70788 91.0854 3.84126L91.0586 9.41647C91.0586 9.41647 92.2931 8.6162 94.0912 8.6162H94.118C95.9429 8.6162 98.5998 9.28309 98.5998 14.4048ZM85.5301 9.01633H82.3901C82.2291 9.01633 82.1486 9.12303 82.1486 9.30976V17.3925C82.1486 17.3925 81.3167 17.9793 80.1895 17.9793C79.0623 17.9793 78.7403 17.4725 78.7403 16.3521V9.28309C78.7403 9.14971 78.6329 9.04301 78.4987 9.04301H75.3051C75.1709 9.04301 75.0636 9.14971 75.0636 9.28309V16.8856C75.0636 20.1667 76.9153 20.967 79.438 20.967C81.5314 20.967 83.2221 19.82 83.2221 19.82C83.2221 19.82 83.3026 20.4068 83.3294 20.4869C83.3563 20.5669 83.4636 20.6202 83.571 20.6202H85.5838C85.7448 20.6202 85.8253 20.5135 85.8253 20.3802L85.8521 9.25641C85.8253 9.14971 85.6911 9.01633 85.5301 9.01633ZM50.0513 9.01633H46.8577C46.7235 9.01633 46.6161 9.14971 46.6161 9.30976V20.2201C46.6161 20.5135 46.804 20.6202 47.0723 20.6202H49.9439C50.2391 20.6202 50.3197 20.4869 50.3197 20.2201V9.25641C50.3197 9.12303 50.1855 9.01633 50.0513 9.01633ZM48.4947 3.97463C47.3407 3.97463 46.4283 4.88161 46.4283 6.02866C46.4283 7.17571 47.3407 8.08268 48.4947 8.08268C49.6219 8.08268 50.5344 7.17571 50.5344 6.02866C50.5344 4.88161 49.6219 3.97463 48.4947 3.97463ZM73.185 3.60118H70.0182C69.884 3.60118 69.7766 3.70788 69.7766 3.84126V9.9233H64.8118V3.86793C64.8118 3.73455 64.7044 3.62785 64.5702 3.62785H61.3766C61.2424 3.62785 61.1351 3.73455 61.1351 3.86793V20.4068C61.1351 20.5402 61.2692 20.6469 61.3766 20.6469H64.5702C64.7044 20.6469 64.8118 20.5402 64.8118 20.4068V13.3111H69.7766L69.7498 20.3802C69.7498 20.5135 69.8572 20.6202 69.9913 20.6202H73.185C73.3192 20.6202 73.4265 20.5135 73.4265 20.3802V3.84126C73.4265 3.73455 73.3192 3.60118 73.185 3.60118ZM44.9254 10.937V19.4732C44.9254 19.5265 44.8985 19.6332 44.8449 19.6599C44.8449 19.6599 42.9663 20.9937 39.88 20.9937C36.1496 20.9937 31.7483 19.82 31.7483 12.1907C31.7483 4.53482 35.6129 2.96096 39.3701 2.98764C42.6442 2.98764 43.9592 3.70788 44.1471 3.84126C44.2008 3.92128 44.2276 3.97463 44.2276 4.05466L43.6103 6.69555C43.6103 6.82893 43.4762 6.98898 43.3151 6.93563C42.7784 6.77558 41.9733 6.45547 40.0678 6.45547C37.8672 6.45547 35.5055 7.06901 35.5055 12.004C35.5055 16.939 37.7598 17.4992 39.3701 17.4992C40.7388 17.4992 41.2487 17.3391 41.2487 17.3391V13.9246H39.048C38.887 13.9246 38.7528 13.8179 38.7528 13.6846V10.937C38.7528 10.8036 38.8602 10.6969 39.048 10.6969H44.657C44.818 10.6702 44.9254 10.8036 44.9254 10.937Z" fill="#1B1F24"/>
+</svg>

src/routes/(public)/(guest)/register/github-education-program/+page.svelte

@@ -3,6 +3,10 @@
     import { sdk } from '$lib/stores/sdk';
     import { OAuthProvider } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
+    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
+    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
+    import GithubLogoDark from '$lib/images/github-logo-dark.svg';
+    import GithubLogoLight from '$lib/images/github-logo-light.svg';
 
     let artworkImageSrc;
     getArtworkImageSrc();
@@ -49,16 +53,17 @@
 <section class="github-education-container">
     <div class="artwork">
         <img src={artworkImageSrc} alt="" />
+        <div class="mobile-gradient" />
     </div>
     <div class="content-container">
         <div class="content">
             <div class="logos">
                 <img
-                    src="/console/src/lib/images/github-education-program/appwrite-logo.svg"
+                    src={$app.themeInUse === 'light' ? AppwriteLogoLight : AppwriteLogoDark}
                     alt="Appwrite logo" />
                 <div class="logo-divider" />
                 <img
-                    src="/console/src/lib/images/github-education-program/github-logo.svg"
+                    src={$app.themeInUse === 'light' ? GithubLogoLight : GithubLogoDark}
                     alt="Github logo" />
             </div>
             <h1>Join the Appwrite Education Program</h1>
@@ -75,6 +80,17 @@
 </section>
 
 <style>
+    :global(.theme-dark) {
+        --gradient-start-color: #0c0c0d;
+        --heading-color: inherit;
+        --text-color: #e4e4e7a3;
+    }
+    :global(.theme-light) {
+        --gradient-start-color: #ededf0;
+        --heading-color: #19191c;
+        --text-color: #19191ca3;
+    }
+
     .github-education-container {
         display: flex;
         flex-direction: column;
@@ -96,7 +112,7 @@
             background: linear-gradient(
                 56deg,
                 rgba(253, 54, 110, 0.1) 0%,
-                rgba(253, 54, 110, 0) 48.38%
+                var(--gradient-start-color) 48.38%
             );
 
             display: flex;
@@ -105,6 +121,19 @@
         }
     }
 
+    .artwork .mobile-gradient {
+        @media (max-width: 768px) {
+            background: linear-gradient(
+                180deg,
+                rgba(25, 25, 28, 0) -4.43%,
+                hsl(var(--p-body-bg-color)) 100%
+            );
+            position: absolute;
+            width: 100%;
+            height: 16.5rem;
+        }
+    }
+
     .artwork img {
         width: 100%;
 
@@ -115,7 +144,7 @@
     }
 
     .content-container {
-        background-color: #141416;
+        background-color: hsl(var(--p-body-bg-color));
         width: 100%;
         padding: 1rem;
 
@@ -138,11 +167,12 @@
         font-size: 2rem;
         line-height: 2.125rem;
         margin-top: 2.5rem;
+        color: var(--heading-color);
     }
 
     .content p {
         margin-top: 1.25rem;
-        color: #e4e4e7a3;
+        color: var(--text-color);
         font-size: 1.125rem;
         font-weight: 500;
         line-height: 1.625rem;