basic styles

packages/renderer/src/App.tsx

@@ -38,6 +38,15 @@ export default function App() {
           --red: #ff5555;
           --yellow: #f1fa8c;
           --primary: var(--purple);
+          --neutral-1: #191a21;
+          --neutral-2: #21222c;
+          --neutral-3: #282a36;
+          --neutral-4: #343746;
+          --neutral-5: #44475a;
+          --neutral-6: #717380;
+          --neutral-7: #9ea0a6;
+          --neutral-8: #cbcccc;
+          --neutral-9: #f8f8f2;
         }
         a {
           color: var(--cyan);

packages/renderer/src/components/ColorTest.tsx

@@ -0,0 +1,36 @@
+
+
+
+export function ColorTest() {
+  return (
+    <div>
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(9, 1fr)'
+      }}>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => (
+          <div key={n} style={{
+            background: `var(--neutral-${n})`,
+            width: '100%',
+            height: '32px',
+            display: 'inline-block'
+          }}></div>
+        ))}
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(7, 1fr)'
+      }}>
+        {['green','orange','cyan','pink','purple','red','yellow'].map((c) => (
+          <div key={c} style={{
+            backgroundColor: `var(--${c})`,
+            width: '100%',
+            height: '32px',
+            display: 'inline-block'
+          }}></div>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/renderer/src/pages/Channel.tsx

@@ -22,8 +22,8 @@ export default function Channel(props: ChannelProps) {
         gridTemplateColumns: 'min-content 1fr',
         color: selected ? 'cyan' : 'inherit',
         cursor: 'pointer',
-        background: selected ? 'var(--current-line)' :
-                       hover ? 'rgba(255, 255, 255, 0.1)' :
+        background: selected ? 'var(--neutral-4)' :
+                       hover ? 'var(--neutral-3)' :
                                'inherit',
         borderRadius: '8px',
         // placeItems: 'left center',
@@ -35,18 +35,17 @@ export default function Channel(props: ChannelProps) {
       ref={ref}
     >
       <CgHashtag color={
-          selected ? 'var(--foreground)' :
-          hover ? 'var(--comment)' :
-          'var(--current-line)'
+          selected ? 'var(--neutral-9)' :
+             hover ? 'var(--neutral-7)' :
+                     'var(--neutral-7)'
         } size={24} style={{
-        fontWeight: 'bold',
         margin: '4px',
       }}></CgHashtag>
       <div style={{
         lineHeight: '32px',
-        color: selected ? 'var(--foreground)' :
-                  hover ? 'var(--comment)' :
-                          'var(--current-line)'
+        color: selected ? 'var(--neutral-9)' :
+                  hover ? 'var(--neutral-9)' :
+                          'var(--neutral-7)'
       }}>
         {name.toLowerCase().replaceAll(' ', '-').trim()}
       </div>

packages/renderer/src/pages/Channels.tsx

@@ -1,14 +1,14 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import { useApi } from '../lib/useApi';
 import type { IMessage } from './Message';
-import NameTextbox from './NameTextbox';
-import LoginQR from './LoginQR';
-import Totp from '../components/Totp';
 import useChannel from '../hooks/useChannel';
 import useClientId from '../hooks/useClientId';
 import useHomeServer from '../contexts/PersistentState/useHomeServerNative';
-import Logout from '../components/Logout';
-import { CgHashtag } from 'react-icons/cg';
 import Channel from './Channel';
 
 interface IChannel {
@@ -28,8 +28,6 @@ export default function Channels() {
   const { channel, setChannel } = useChannel()
   const { clientId } = useClientId()
 
-  const { setHomeServer } = useHomeServer();
-
   const { send } = useApi({
     'channels:list'(data: IChannel[]) {
       setChannels(data);
@@ -89,6 +87,7 @@ export default function Channels() {
     <div style={{
       height: '100%',
       background: '#21222c',
+      padding: '0px 8px'
     }}>
       <br></br>
       {channels.map(c => (
@@ -99,33 +98,6 @@ export default function Channels() {
           name={c.name}
         ></Channel>
       ))}
-      {/* <input
-        ref={textbox}
-        style={{
-          background: '#343746',
-          border: 'none',
-          padding: '8px',
-          borderRadius: '8px',
-          outline: 'none',
-          color: 'white',
-          fontSize: '16px',
-          width: '90px',
-        }}
-      /><button onClick={add} style={{
-        marginLeft: '8px',
-        background: '#bd93f9',
-        border: 'none',
-        color: 'white',
-        padding: '8px',
-        fontSize: '16px',
-        cursor: 'pointer',
-        borderRadius: '8px',
-        // lineHeight: '20px'
-      }}>ADD</button>
-      <NameTextbox></NameTextbox><br></br>
-      <Logout></Logout><br></br> */}
-      {/* <LoginQR></LoginQR> */}
-      {/* <Totp></Totp> */}
     </div>
   );
 }