feat: improve mobile style

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;
-}
+}

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 {

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 (

app/components/settings.module.scss

@@ -11,4 +11,4 @@
 
 .avatar {
   cursor: pointer;
-}
+}

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>
+}