From 100507a1d1d1f67f65413a76ded957aa810b9fc8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 28 Apr 2023 14:52:16 +0100
Subject: [PATCH] fix: light theme stuff

---
 src/lib/layout/unauthenticated.svelte | 42 ++++++++++++++++++++-------
 src/routes/+layout.svelte             | 14 +++++++--
 src/routes/card/Card.svelte           |  2 +-
 src/routes/card/display.svelte        |  4 +--
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index 042430c8f..7776ee091 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { app } from '$lib/stores/app';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
-    import { isCloud } from '$lib/system';
-    import LoginDark from '$lib/images/login/login-dark-mode.svg';
-    import LoginLight from '$lib/images/login/login-light-mode.svg';
-    import AppwriteLogo from '$lib/images/appwrite.svg';
     import AppwriteCloudLogo from '$lib/images/appwrite-cloud.svg';
-    import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
+    import AppwriteLogo from '$lib/images/appwrite.svg';
     import Cloud1 from '$lib/images/login/cloud-1.svg';
     import Cloud2 from '$lib/images/login/cloud-2.svg';
+    import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
+    import LoginDark from '$lib/images/login/login-dark-mode.svg';
+    import LoginLight from '$lib/images/login/login-light-mode.svg';
+    import { app } from '$lib/stores/app';
+    import { user } from '$lib/stores/user';
+    import { isCloud } from '$lib/system';
+    import { onDestroy } from 'svelte';
 
     export let imgLight = LoginLight;
     export let imgDark = LoginDark;
@@ -28,9 +28,25 @@
         'kotlin',
         'swift'
     ];
+
+    let innerWidth = 0;
+    $: isMobile = innerWidth < 768;
+
+    const prevTheme = $app.theme;
+    $: if (isMobile && isCloud) {
+        $app.theme = 'dark';
+    } else {
+        $app.theme = prevTheme;
+    }
+
+    onDestroy(() => {
+        $app.theme = prevTheme;
+    });
 </script>
 
-<main class="grid-1-1 is-full-page" id="main">
+<svelte:window bind:innerWidth />
+
+<main class="grid-1-1 is-full-page" class:main-cloud={isCloud} id="main">
     {#if isCloud}
         <section
             class="cloud-section grid-1-1-col-1 u-flex u-flex-vertical u-overflow-hidden"
@@ -63,7 +79,7 @@
                     {#each technologies as tech}
                         <li>
                             <img
-                                src={`${base}/icons/${$app.themeInUse}/grayscale/${tech}.svg`}
+                                src={`${base}/icons/dark/grayscale/${tech}.svg`}
                                 alt={tech}
                                 aria-hidden="true"
                                 aria-label={tech} />
@@ -152,7 +168,7 @@
             </div>
 
             {#if isCloud}
-                <div class="is-only-mobile u-margin-block-start-auto">
+                <div class="is-only-mobile u-margin-block-start-auto theme-dark">
                     <div class="mobile-beta">Public <span>beta</span></div>
                 </div>
             {/if}
@@ -267,6 +283,10 @@
     }
 
     @media (max-width: 767px) {
+        .main-cloud {
+            background-color: hsl(var(--color-neutral-500));
+        }
+
         .is-cloud {
             background: var(--url);
             background-position: center -150px;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6bf967226..78564d2c4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -144,6 +144,16 @@
         }
     }
 
+    .theme-dark .with-separators {
+        --separator-color: hsl(var(--color-neutral-200));
+        --separator-text: hsl(var(--color-neutral-100));
+    }
+
+    .with-separators {
+        --separator-color: hsl(var(--color-neutral-5));
+        --separator-text: hsl(var(--color-neutral-50));
+    }
+
     .with-separators {
         display: flex;
         align-items: center;
@@ -152,14 +162,14 @@
         text-transform: uppercase;
         width: 100%;
 
-        color: hsl(var(--color-neutral-100));
+        color: var(--separator-text);
 
         &::before,
         &::after {
             content: '';
             flex: 1;
             height: 1px;
-            background: hsl(var(--color-neutral-200));
+            background: var(--separator-color);
         }
     }
 </style>
diff --git a/src/routes/card/Card.svelte b/src/routes/card/Card.svelte
index 5eaf5391e..72d91cb45 100644
--- a/src/routes/card/Card.svelte
+++ b/src/routes/card/Card.svelte
@@ -364,7 +364,7 @@
     }
 
     .card__thick {
-        background-color: #1b1b28;
+        background-color: transparent;
         position: absolute;
         width: 100%;
         height: 100%;
diff --git a/src/routes/card/display.svelte b/src/routes/card/display.svelte
index 8588d7aac..568c09d74 100644
--- a/src/routes/card/display.svelte
+++ b/src/routes/card/display.svelte
@@ -26,7 +26,7 @@
     let cardIsFlipped = false;
     let showEmbedCode = false;
 
-    const { frontImg, ogImg } = getCardImgUrls(userId);
+    const { frontImg } = getCardImgUrls(userId);
 
     $: title = variant === 'owner' ? 'Welcome to the cloud' : 'Join the Appwrite Cloud';
     $: shareableLink = `${window.location.origin}/card/${userId}`;
@@ -36,7 +36,7 @@
         `</a>`
     ].join('\n');
     $: twitterText = encodeURIComponent(
-        [`Check out my Appwrite Cloud card at ${shareableLink}!`, `${ogImg}`].join('\n')
+        [`Check out my Appwrite Cloud card at ${shareableLink}!`].join('\n')
     );
 
     function copyShareableLink() {