Merge pull request #14 from leftmove/development

Development
leftmove · Jun 11, 2024 · 8b885aa · 8b885aa
2 parents 8b1637f + 0bc7d57
commit 8b885aa
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -89,7 +89,7 @@ A production version of the site is hosted at [`wallstreetlocal.com`](https://wa
    npm run start
    ```
 
-Once the above steps are completed, the frontend should be hosted at [localhost:3000](http://localhost:3000), with the backend automatically be configured to [`content.wallstreetlocal.com`](https://content.wallstreetlocal.com).
+Once the above steps are completed, the frontend should be hosted at [`localhost:3000`](http://localhost:3000), with the backend automatically configured to [`content.wallstreetlocal.com`](https://content.wallstreetlocal.com).
 
 Hosting the frontend alone is the reccomended way to self-host, but if you want to self-host the backend too, see [below](#backend).
 
@@ -117,7 +117,7 @@ The development build is mainly made for testing, so it is ideal for self-hostin
 
 To run the full app, you need the microservices running through Docker, and the main application running seperately.
 
-You can find the developement compose file [here]("./backend/docker-compose.dev.yaml"). You will also need a `.env` file that can be found [here]("./backend/.env.example").
+You can find the developement compose file [here](./backend/docker-compose.dev.yaml). You will also need a `.env` file that can be found [here](./backend/.env.example).
 
 Once you have all the configuration files ready, to start the app, run the following.
 
@@ -152,7 +152,7 @@ Once you have all the configuration files ready, to start the app, run the follo
 
 The production build is made for deploying at scale, so running it will be more cumbersome.
 
-You can find the compose file [here]("./backend/docker-compose.prod.yaml"). There is no `.env` file though, as all the environment variables are included in the compose file.
+You can find the compose file [here](./backend/docker-compose.prod.yaml). There is no `.env` file though, as all the environment variables are included in the compose file.
 
 Unless you are runnng the production build for many people, you should change the following settings.
 

diff --git a/backend/.env.example b/backend/.env.example
@@ -1,9 +1,9 @@
-# DEVELOPMENt
+# DEVELOPMENT
 
 SERVER = "127.0.0.1"
 APP_NAME = "backend"
 ENVIRONMENT = "development"
-ADMIN_PASSWORD = "***********"
+ADMIN_PASSWORD = "<YOUR CHOSEN PASSWORD>"
 DEBUG_CIK = "1067983"
 
 WORKERS = 1

diff --git a/frontend/components/Analysis/Analysis.module.css b/frontend/components/Analysis/Analysis.module.css
@@ -59,6 +59,10 @@
 }
 
 .analysis-children {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
   padding: 20px;
   margin: auto;
 }
diff --git a/frontend/components/Explorer/Timeline/Select/Picker/Picker.jsx b/frontend/components/Explorer/Timeline/Select/Picker/Picker.jsx
@@ -56,13 +56,10 @@ const Picker = (props) => {
               className={[styles["picker-filing"], fontLight.className].join(
                 " "
               )}
+              onClick={() => handleClick()}
             >
               {filingAttributes.map((a) => (
-                <span
-                  key={a}
-                  className={styles["filing-attribute"]}
-                  onClick={() => handleClick()}
-                >
+                <span key={a} className={styles["filing-attribute"]}>
                   {a}
                 </span>
               ))}

diff --git a/frontend/components/Explorer/Timeline/Select/Picker/Picker.module.css b/frontend/components/Explorer/Timeline/Select/Picker/Picker.module.css
@@ -7,6 +7,8 @@
   width: 100%;
   height: 100%;
   border-radius: 5px;
+  top: 0;
+  left: 0;
 
   background-color: var(--white);
 }
@@ -72,8 +74,12 @@
 }
 
 .filing-attribute {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-  width: 15%;
+
+  width: 30%;
   margin: 5px;
   border-radius: 5px;
 

diff --git a/frontend/components/Explorer/Timeline/Select/Select.jsx b/frontend/components/Explorer/Timeline/Select/Select.jsx
@@ -61,6 +61,7 @@ const Select = (props) => {
 
   return (
     <div className={styles["select-container"]}>
+      <div className={styles["select-background"]}></div>
       <Picker
         selected={selected}
         attributes={attributes}
@@ -88,7 +89,6 @@ const Select = (props) => {
               "-",
               ""
             )}/${selected?.access}-index.htm`}
-            color="light"
             width={"40px"}
           />
         </div>

diff --git a/frontend/components/Explorer/Timeline/Select/Select.module.css b/frontend/components/Explorer/Timeline/Select/Select.module.css
@@ -2,8 +2,22 @@
   display: flex;
   position: relative;
 
-  width: 92%;
-  margin-top: 10px;
+  padding: 10px;
+
+  width: calc(50% - 1.5%);
+}
+
+.select-background {
+  position: absolute;
+
+  opacity: 0.1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 5px;
+
+  background-color: var(--secondary);
 }
 
 .select {
@@ -12,16 +26,13 @@
   align-items: center;
   justify-content: center;
 
+  z-index: 5;
   border-radius: 5px;
   width: 100%;
-  height: 100%;
-
-  background-color: var(--secondary-dark);
 }
 
 .select-headers {
   width: 95%;
-  padding: 40px 20px 0px 20px;
 }
 
 .select-records {
@@ -36,7 +47,6 @@
   justify-content: space-between;
 
   width: 80%;
-  padding: 20px;
 }
 
 .picker-attribute {
@@ -48,12 +58,11 @@
 .attribute-button {
   all: unset;
   cursor: pointer;
-
-  color: var(--white);
 }
 
 .attribute-text {
-  color: var(--white);
+  color: var(--secondary-dark);
+  font-size: 0.85vw;
   padding: 5px;
 
   transition: color 0.1s ease;
@@ -65,7 +74,7 @@
 
 .attribute-hint {
   opacity: 0.8;
-  font-size: 0.6rem;
+  font-size: 0.5vw;
 
-  color: var(--white);
+  color: var(--secondary-dark);
 }
diff --git a/frontend/components/Explorer/Timeline/Timeline.jsx b/frontend/components/Explorer/Timeline/Timeline.jsx
@@ -46,11 +46,11 @@ const Timeline = () => {
           type="secondary"
           setDescription={(desc) => setDescription(desc)}
         />
-        <Tip
-          text="This UI is new and therefore looks somewhat ugly. If you have any ideas, suggestions on GitHub are appreciated. (This goes for any other CSS on the website as well.)"
-          top={30}
-        />
       </div>
+      <Tip
+        text="This UI is new and therefore looks somewhat ugly. If you have any ideas, suggestions on GitHub are appreciated."
+        top={30}
+      />
     </Analysis>
   );
 };

diff --git a/frontend/components/Explorer/Timeline/Timeline.module.css b/frontend/components/Explorer/Timeline/Timeline.module.css
@@ -1,12 +1,9 @@
 .timeline-container {
   display: flex;
-  flex-direction: column;
   align-items: center;
 
   border-radius: 5px;
   max-height: 0px;
-  padding: 30px;
-  margin: 20px;
   overflow-y: hidden;
 
   transition-property: max-height, background-color;
@@ -99,9 +96,8 @@
 
 .timeline-selects {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
 
   width: 100%;
 }
diff --git a/frontend/components/Index/Sort/Gain/Gain.jsx b/frontend/components/Index/Sort/Gain/Gain.jsx
@@ -86,6 +86,7 @@ const Gain = () => {
 
   return (
     <div className={styles["gains"]}>
+      <div className={styles["gain-background"]}></div>
       <div className={styles["gains-container"]}>
         <DndContext
           sensors={sensors}

diff --git a/frontend/components/Index/Sort/Gain/Gain.module.css b/frontend/components/Index/Sort/Gain/Gain.module.css
@@ -1,6 +1,24 @@
 .gains {
   display: flex;
   flex-direction: column;
+  position: relative;
+
+  width: 80%;
+  padding: 20px;
+  margin-top: 30px;
+}
+
+.gain-background {
+  position: absolute;
+
+  opacity: 0.1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 5px;
+
+  background-color: var(--secondary);
 }
 
 .gains-container {
@@ -9,7 +27,8 @@
   align-items: flex-start;
   position: relative;
 
-  margin-top: 20px;
+  width: 100%;
+  height: 100%;
 }
 
 .dates-container {