From 64e331a3e3b7948f7da81437a573cc64d94293ba Mon Sep 17 00:00:00 2001
From: Yifei Zhang <yidadaa@qq.com>
Date: Wed, 15 Mar 2023 05:50:11 +0000
Subject: [PATCH] feat: improve mobile style

---
 app/components/button.module.scss   | 14 +++++++++++---
 app/components/home.module.scss     | 11 +++++------
 app/components/home.tsx             |  1 -
 app/components/settings.module.scss |  2 +-
 app/components/ui-lib.tsx           | 11 +++++++++++
 app/globals.scss                    | 10 +++++++---
 app/page.tsx                        |  2 +-
 7 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index 1f2a4d29..d41fa873 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -29,8 +29,8 @@
   align-items: center;
 }
 
-@media (prefers-color-scheme: dark) {
-  div:not(:global(.no-dark)) > .icon-button-icon {
+@mixin dark-button {
+  div:not(:global(.no-dark))>.icon-button-icon {
     filter: invert(0.5);
   }
 
@@ -39,7 +39,15 @@
   }
 }
 
+:global(.dark) {
+  @include dark-button;
+}
+
+@media (prefers-color-scheme: dark) {
+  @include dark-button;
+}
+
 .icon-button-text {
   margin-left: 5px;
   font-size: 12px;
-}
+}
\ No newline at end of file
diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index 63fb014b..0014e402 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -38,6 +38,7 @@
 }
 
 .sidebar {
+  top: 0;
   width: var(--sidebar-width);
   box-sizing: border-box;
   padding: 20px;
@@ -68,17 +69,15 @@
 
   .sidebar {
     position: absolute;
-    top: -100%;
+    left: -100%;
     z-index: 999;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    height: 80vh;
-    box-shadow: var(--shadow);
+    height: 100vh;
     transition: all ease 0.3s;
+    box-shadow: none;
   }
 
   .sidebar-show {
-    top: 0;
+    left: 0;
   }
 
   .mobile {
diff --git a/app/components/home.tsx b/app/components/home.tsx
index e52d3769..db8edb16 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -26,7 +26,6 @@ import CloseIcon from "../icons/close.svg";
 
 import { Message, SubmitKey, useChatStore, Theme } from "../store";
 import { Settings } from "./settings";
-import dynamic from "next/dynamic";
 
 export function Markdown(props: { content: string }) {
   return (
diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index e393076f..08be1ff2 100644
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -11,4 +11,4 @@
 
 .avatar {
   cursor: pointer;
-}
+}
\ No newline at end of file
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 85947cc5..be9974af 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -1,4 +1,5 @@
 import styles from "./ui-lib.module.scss";
+import LoadingIcon from "../icons/three-dots.svg";
 
 export function Popover(props: {
   children: JSX.Element;
@@ -36,3 +37,13 @@ export function ListItem(props: { children: JSX.Element[] }) {
 export function List(props: { children: JSX.Element[] }) {
   return <div className={styles.list}>{props.children}</div>;
 }
+
+export function Loading() {
+  return <div style={{
+    height: "100vh",
+    width: "100vw",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }}><LoadingIcon /></div>
+}
\ No newline at end of file
diff --git a/app/globals.scss b/app/globals.scss
index 06f540ca..4d823df6 100644
--- a/app/globals.scss
+++ b/app/globals.scss
@@ -6,6 +6,7 @@
   --primary: rgb(29, 147, 171);
   --second: rgb(231, 248, 255);
   --hover-color: #f3f3f3;
+  --bar-color: var(--primary);
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@@ -24,6 +25,8 @@
   --second: rgb(27 38 42);
   --hover-color: #323232;
 
+  --bar-color: var(--primary);
+
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
 }
 
@@ -79,7 +82,9 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 20px;
+  --bar-width: 1px;
+  width: var(--bar-width);
+  height: var(--bar-width);
 }
 
 ::-webkit-scrollbar-track {
@@ -87,9 +92,8 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--bar-color);
   border-radius: 20px;
-  border: 6px solid transparent;
   background-clip: content-box;
 }
 
diff --git a/app/page.tsx b/app/page.tsx
index ea3ea07c..a986da3f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
-import { Home } from "./components/home";
 import { Analytics } from "@vercel/analytics/react";
+import { Home } from './components/home'
 
 export default function App() {
   return (