From d8447f759d4cacd1d049ad2e6721f64e9772ca2f Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 9 Mar 2022 01:50:55 -0800
Subject: [PATCH] client: improved mobile stylings

---
 client/components/document/index.tsx       |  2 +-
 client/components/header/header.module.css |  8 ++++----
 client/components/header/index.tsx         |  6 ++++--
 client/components/post/post.module.css     | 12 ++++++------
 client/components/post/title/index.tsx     |  4 ++--
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index b0b1150..3dca390 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -55,7 +55,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
                         disabled={!editable}
                         width={"100%"}
                     />
-                    {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
+                    {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
                 </div>
                 <div className={styles.descriptionContainer}>
                     {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
diff --git a/client/components/header/header.module.css b/client/components/header/header.module.css
index a83e98b..23b8e81 100644
--- a/client/components/header/header.module.css
+++ b/client/components/header/header.module.css
@@ -30,10 +30,10 @@
   }
 }
 
-.controls {
-  flex: 1 1;
-  display: flex;
-  align-items: center;
+.controls button:active,
+.controls button:focus,
+.controls button:hover {
+  outline: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .wrapper {
diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx
index 4e4a7aa..263891c 100644
--- a/client/components/header/index.tsx
+++ b/client/components/header/index.tsx
@@ -121,8 +121,10 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                 <Button
                     auto
                     type="abort"
-                    onClick={() => setExpanded(!expanded)}>
-                    <MenuIcon size="1.125rem" />
+                    onClick={() => setExpanded(!expanded)}
+                >
+                    <Spacer height={5 / 6} width={0} />
+                    <MenuIcon size="1.5rem" />
                 </Button>
             </div>
             {isMobile && expanded && (<div className={styles.mobile}>
diff --git a/client/components/post/post.module.css b/client/components/post/post.module.css
index 3fb964e..959bb33 100644
--- a/client/components/post/post.module.css
+++ b/client/components/post/post.module.css
@@ -10,12 +10,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
 }
 
-.title > div {
-  flex-grow: 1;
-}
-
-.mygist {
-  flex-grow: 0.4;
+@media screen and (max-width: 650px) {
+  .title {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }
diff --git a/client/components/post/title/index.tsx b/client/components/post/title/index.tsx
index d14d4c7..92b8020 100644
--- a/client/components/post/title/index.tsx
+++ b/client/components/post/title/index.tsx
@@ -17,8 +17,8 @@ type props = {
 
 const Title = ({ setTitle, title }: props) => {
     return (<div className={styles.title}>
-        <Text h1 width={"150px"} className={styles.drift}>Drift &mdash;</Text>
-        <ShiftBy y={-6}>
+        <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
+        <ShiftBy y={-3}>
             <Input
                 placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
                 value={title || ""}