legacy style

marihachi · Jan 26, 2024 · b126e14 · b126e14
1 parent 27bff7d
commit b126e14
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 62 deletions.
diff --git a/src/views/App.css b/src/views/App.css
@@ -3,79 +3,72 @@
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+  background-color: #EEE;
 }
 
 body {
   margin: 0;
-  min-width: 320px;
-  min-height: 90vh;
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+  padding: 0.5rem 1rem;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+.app-container {
+  margin: auto;
+  min-width: 320px;
+  max-width: 800px;
 }
 
 .container {
-  margin: auto;
-  width: 70%;
+  margin: 2rem;
 }
 
-#login-host {
+.login-host {
   margin-right: 1em;
 }
 
-#post-container {
+.account-header {
+  display: flex;
+  align-items: center;
+}
+
+.account-header > * {
+  margin: 10px;
+}
+
+.post-container {
   display: flex;
   align-items: flex-end;
 }
 
-#post textarea {
+.post-textarea {
   margin-right: 1em;
 
   height: 5rem;
   width: 15rem;
 }
+
+.note-block {
+  display: block;
+  margin-bottom: 0.5rem;
+  list-style: none;
+}
+
+.note-header {
+  color: #22F;
+}
+
+.timeline-list {
+  padding-inline-start: 0;
+}
diff --git a/src/views/App.tsx b/src/views/App.tsx
@@ -27,19 +27,21 @@ const App: FC = () => {
   }, []);
 
   return (
-    <div className="container">
-      <LoginForm
-        account={ account }
-        onUpdateAccount={ x => setAccount(x) }
-        mode={ mode }
-      />
-      {
-        account != null &&
-        <Timeline
+    <div className='app-container'>
+      <div className='container'>
+        <LoginForm
           account={ account }
+          onUpdateAccount={ x => setAccount(x) }
           mode={ mode }
         />
-      }
+        {
+          account != null &&
+          <Timeline
+            account={ account }
+            mode={ mode }
+          />
+        }
+      </div>
     </div>
   );
 };

diff --git a/src/views/LoginForm.tsx b/src/views/LoginForm.tsx
@@ -41,10 +41,12 @@ const LoginForm: FC<Props> = (props) => {
     return (
       <>
         <h2>アカウント</h2>
-        <p>ログイン先: { props.account.host }</p>
-        <button onClick={ onClickLogout }>
-          ログアウト
-        </button>
+        <div className='account-header'>
+          <p>ログイン先: { props.account.host }</p>
+          <button onClick={ onClickLogout }>
+            ログアウト
+          </button>
+        </div>
       </>
     );
   } else {
@@ -53,6 +55,7 @@ const LoginForm: FC<Props> = (props) => {
         <h2>アカウント</h2>
         <input
           type="text"
+          className='login-host'
           placeholder="ホスト名"
           value={ hostName }
           onChange={ e => setHostName(e.target.value) }

diff --git a/src/views/PostForm.tsx b/src/views/PostForm.tsx
@@ -25,8 +25,8 @@ const PostForm: FC<Props> = (props) => {
 
   return (
     <>
-      <div>
-        <textarea value={ text } onChange={ e => setText(e.target.value) } />
+      <div className='post-container'>
+        <textarea className='post-textarea' value={ text } onChange={ e => setText(e.target.value) } />
         <button onClick={ onClickPost }>投稿</button>
       </div>
     </>

diff --git a/src/views/Timeline.tsx b/src/views/Timeline.tsx
@@ -30,7 +30,7 @@ const Timeline: FC<Props> = (props) => {
         } catch {
           console.error('failed to fetch timeline.');
         }
-        await sleep(2000);
+        await sleep(1000);
       }
       //console.log('timeline stopped');
     })();
@@ -47,12 +47,12 @@ const Timeline: FC<Props> = (props) => {
         account={ props.account }
         mode={ props.mode }
       />
-      <ul>
+      <ul className='timeline-list'>
         {
           notes.map(note =>
-            <li key={ note.id } style={{ marginBottom: "0.5rem" }}>
-              <div style={{ color: '#AAA' }}>{ note.user.name } @{ note.user.username }</div>
-              <div>{ note.text }</div>
+            <li key={ note.id } className='note-block'>
+              <div className='note-header'>{ note.user.name } @{ note.user.username }</div>
+              <div className='note-body'>{ note.text }</div>
             </li>
           )
         }