Revert "making databag pretty, thanks @lil5"

This reverts commit afb7632.
balzack · May 2, 2024 · 55e054a · 55e054a
1 parent d38d601
commit 55e054a
Show file tree

Hide file tree

Showing 231 changed files with 4,307 additions and 6,441 deletions.
diff --git a/net/web/index.html b/net/web/index.html
@@ -1,39 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link
-      rel="icon"
-      href="/favicon.ico"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <meta
-      name="theme-color"
-      content="#000000"
-    />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#000000" />
     <meta
       name="Databag"
       content="Communication for the Decentralized Web"
     />
-    <link
-      rel="apple-touch-icon"
-      href="/logo192.png"
-    />
-    <link
-      rel="manifest"
-      href="/manifest.json"
-    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Databag</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script
-      type="module"
-      src="/src/index.tsx"
-    ></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/net/web/mock/fileMock.js b/net/web/mock/fileMock.js
@@ -1 +1,2 @@
-module.exports = '';
+module.exports = ''; 
+
diff --git a/net/web/src/App.tsx b/net/web/src/App.tsx
@@ -1,6 +1,7 @@
+
 import 'antd/dist/reset.css';
 import { Colors } from 'constants/Colors';
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
 
 import { AppContextProvider } from 'context/AppContext';
 import { AccountContextProvider } from 'context/AccountContext';
@@ -22,6 +23,7 @@ import { Dashboard } from './dashboard/Dashboard';
 import { ConfigProvider } from 'antd';
 
 function App() {
+
   return (
     <UploadContextProvider>
       <ChannelContextProvider>
@@ -33,46 +35,25 @@ function App() {
                   <SettingsContextProvider>
                     <AppContextProvider>
                       <AppWrapper>
-                        <ConfigProvider
-                          theme={{
-                            token: {
-                              colorPrimary: Colors.primary,
-                              colorLink: Colors.primary,
-                              colorLinkHover: Colors.background,
-                              colorBgBase: Colors.cancel,
-                            },
-                          }}
-                        >
+                        <ConfigProvider theme={{ token: {
+                            colorPrimary: Colors.primary,
+                            colorLink: Colors.primary,
+                            colorLinkHover: Colors.background,
+                            colorBgBase: Colors.cancel,
+                          } }}>
                           <Router>
                             <Routes>
-                              <Route
-                                path="/"
-                                element={<Root />}
-                              />
-                              <Route
-                                path="/dashboard"
-                                element={<Dashboard />}
-                              />
-                              <Route
-                                path="/admin"
-                                element={<Access mode="admin" />}
-                              />
-                              <Route
-                                path="/login"
-                                element={<Access mode="login" />}
-                              />
-                              <Route
-                                path="/create"
-                                element={<Access mode="create" />}
-                              />
-                              <Route
-                                path="/session"
-                                element={
-                                  <ConversationContextProvider>
-                                    <Session />
-                                  </ConversationContextProvider>
-                                }
-                              ></Route>
+                              <Route path="/" element={ <Root /> } />
+                              <Route path="/dashboard" element={ <Dashboard /> } />
+                              <Route path="/admin" element={ <Access mode="admin" /> } />
+                              <Route path="/login" element={ <Access mode="login" /> } />
+                              <Route path="/create" element={ <Access mode="create" /> } />
+                              <Route path="/session" element={
+                                <ConversationContextProvider>
+                                  <Session />
+                                </ConversationContextProvider>
+                              }>
+                              </Route>
                             </Routes>
                           </Router>
                         </ConfigProvider>

diff --git a/net/web/src/access/Access.styled.ts b/net/web/src/access/Access.styled.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const AccessWrapper = styled.div`
   height: 100%;
-  color: ${(props) => props.theme.hintText};
+  color: ${props => props.theme.hintText};
 
   .footer {
     display: flex;
@@ -22,12 +22,12 @@ export const AccessWrapper = styled.div`
     width: 100%;
     height: 100%;
     padding: 8px;
-
+    
     .center {
       width: 100%;
       height: 100%;
       border-radius: 4px;
-      background: ${(props) => props.theme.frameArea};
+      background: ${props => props.theme.frameArea};
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -44,7 +44,7 @@ export const AccessWrapper = styled.div`
       width: 50%;
       height: 100%;
       padding: 32px;
-      background-color: ${(props) => props.theme.splashArea};
+      background-color: ${props => props.theme.splashArea};
 
       .splash {
         width: 100%;
@@ -56,7 +56,7 @@ export const AccessWrapper = styled.div`
     .right {
       width: 50%;
       height: 100%;
-      background: ${(props) => props.theme.frameArea};
+      background: ${props => props.theme.frameArea};
       display: flex;
       flex-direction: column;
       align-items: center;

diff --git a/net/web/src/access/Access.tsx b/net/web/src/access/Access.tsx
@@ -3,102 +3,109 @@ import { AccessWrapper } from './Access.styled';
 import { Login } from './login/Login';
 import { Admin } from './admin/Admin';
 import { CreateAccount } from './createAccount/CreateAccount';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from "styled-components";
 import { Select } from 'antd';
 
 import dogin from 'images/dogin.png';
 import bogin from 'images/bogin.png';
 
 export function Access({ mode }) {
+
   const { state, actions } = useAccess();
 
   return (
     <ThemeProvider theme={state.colors}>
       <AccessWrapper>
-        {(state.display === 'large' || state.display === 'xlarge') && (
+        { (state.display === 'large' || state.display === 'xlarge') && (
           <div className="split-layout">
             <div className="left">
-              {state.scheme === 'dark' && (
-                <img
-                  className="splash"
-                  src={dogin}
-                  alt="Databag Splash"
-                />
+              { state.scheme === 'dark' && (
+                <img className="splash" src={dogin} alt="Databag Splash" />
               )}
-              {state.scheme === 'light' && (
-                <img
-                  className="splash"
-                  src={bogin}
-                  alt="Databag Splash"
-                />
+              { state.scheme === 'light' && (
+                <img className="splash" src={bogin} alt="Databag Splash" />
               )}
             </div>
             <div className="right">
-              {mode === 'login' && <Login />}
-              {mode === 'create' && <CreateAccount />}
-              {mode === 'admin' && <Admin />}
+              { mode === 'login' && (
+                <Login />
+              )}
+              { mode === 'create' && (
+                <CreateAccount />
+              )}
+              { mode === 'admin' && (
+                <Admin />
+              )}
               <div className="footer">
                 <div className="option">
                   <div className="label">{state.strings.theme}</div>
                   <Select
-                    defaultValue={null}
-                    size="small"
-                    style={{ width: 128 }}
-                    value={state.theme}
-                    onChange={actions.setTheme}
-                    options={[{ value: null, label: state.strings.default }, ...state.themes]}
-                  />
+                      defaultValue={null}
+                      size="small"
+                      style={{ width: 128 }}
+                      value={state.theme}
+                      onChange={actions.setTheme}
+                      options={[{value: null, label: state.strings.default}, ...state.themes]}
+                    />
                 </div>
                 <div className="option">
                   <div className="label">{state.strings.language}</div>
                   <Select
-                    defaultValue={null}
-                    size="small"
-                    style={{ width: 128 }}
-                    value={state.language}
-                    onChange={actions.setLanguage}
-                    options={[{ value: null, label: state.strings.default }, ...state.languages]}
-                  />
+                      defaultValue={null}
+                      size="small"
+                      style={{ width: 128 }}
+                      value={state.language}
+                      onChange={actions.setLanguage}
+                      options={[{value: null, label: state.strings.default}, ...state.languages]}
+                    />
                 </div>
               </div>
             </div>
           </div>
         )}
-        {(state.display === 'medium' || state.display === 'small') && (
+        { (state.display === 'medium' || state.display === 'small') && (
           <div className="full-layout">
             <div className="center">
-              {mode === 'login' && <Login />}
-              {mode === 'create' && <CreateAccount />}
-              {mode === 'admin' && <Admin />}
+              { mode === 'login' && (
+                <Login />
+              )}
+              { mode === 'create' && (
+                <CreateAccount />
+              )}
+              { mode === 'admin' && (
+                <Admin />
+              )}
 
               <div className="footer">
                 <div className="option">
                   <div className="label">{state.strings.theme}</div>
                   <Select
-                    defaultValue={null}
-                    size="small"
-                    style={{ width: 128 }}
-                    value={state.theme}
-                    onChange={actions.setTheme}
-                    options={[{ value: null, label: state.strings.default }, ...state.themes]}
-                  />
+                      defaultValue={null}
+                      size="small"
+                      style={{ width: 128 }}
+                      value={state.theme}
+                      onChange={actions.setTheme}
+                      options={[{value: null, label: state.strings.default}, ...state.themes]}
+                    />
                 </div>
                 <div className="option">
                   <div className="label">{state.strings.language}</div>
                   <Select
-                    defaultValue={null}
-                    size="small"
-                    style={{ width: 128 }}
-                    value={state.language}
-                    onChange={actions.setLanguage}
-                    options={[{ value: null, label: state.strings.default }, ...state.languages]}
-                  />
+                      defaultValue={null}
+                      size="small"
+                      style={{ width: 128 }}
+                      value={state.language}
+                      onChange={actions.setLanguage}
+                      options={[{value: null, label: state.strings.default}, ...state.languages]}
+                    />
                 </div>
               </div>
+
             </div>
           </div>
         )}
       </AccessWrapper>
     </ThemeProvider>
   );
 }
+
diff --git a/net/web/src/access/admin/Admin.styled.ts b/net/web/src/access/admin/Admin.styled.ts
@@ -7,20 +7,20 @@ export const AdminWrapper = styled.div`
   height: 90%;
   display: flex;
   flex-direction: column;
-
+  
   .disabled {
-    background-color: ${(props) => props.theme.disabledArea};
+    background-color: ${props => props.theme.disabledArea};
 
     button {
-      color: ${(props) => props.theme.idleText};
+      color: ${props => props.theme.idleText};
     }
   }
 
   .enabled {
-    background-color: ${(props) => props.theme.enabledArea};
+    background-color: ${props => props.theme.enabledArea};
 
     button {
-      color: ${(props) => props.theme.activeText};
+      color: ${props => props.theme.activeText};
     }
   }
 
@@ -54,7 +54,7 @@ export const AdminWrapper = styled.div`
 
   .form-form {
     flex: 2;
-
+  
     .form-button {
       display: flex;
       align-items: center;
@@ -70,3 +70,5 @@ export const AdminWrapper = styled.div`
     background-color: #444444;
   }
 `;
+
+