Make some minor style adjustments

Author: odarbelaeze

src/components/upload/FileCard.css

@@ -5,14 +5,14 @@
   justify-content: space-between;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
   position: relative;
-  padding: 35px 1em;
+  padding: 45px 1em 50px;
   text-align: center;
   margin-top: 1em;
 }
 
 .fileCard .fileCard__closeButton {
-  background-color: #f0972f;
-  color: #fcfcfc;
+  background-color: var(--color-tree-root);
+  color: var(--color-bg);
   height: 30px;
   width: 30px;
   border: none;
@@ -46,27 +46,45 @@
 .fileCard .fileCard__keywords {
   margin-top: 1em;
   font-size: 16px;
-  color: #5b5b5b;
+  color: var(--color-label);
   max-width: 90%;
 }
 
 .fileCard .fileCard__statGroup {
   margin-top: 1em;
 }
+
 .fileCard .fileCard__stats {
   margin-top: 0.5em;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .fileCard .fileCard__stats__count {
   font-size: 24px;
   font-weight: 600;
 }
+
 .fileCard .fileCard__stats__unit {
   font-size: 14px;
-  color: #5b5b5b;
+  color: var(--color-label);
+}
+
+.fileCard .fileCard__weight {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
 }
+
+.fileCard .fileCard__weight small {
+  font-size: 60%;
+}
+
+.fileCard.capped .fileCard__weight small {
+  color: var(--color-red-accent);
+}
+
 .fileCard_progressBar {
   position: absolute;
   bottom: 0;
@@ -77,20 +95,20 @@
   background: #f0f0f0;
 }
 .fileCard_progressBar .fileCard_progressAdjustment {
-  background: #009d35;
+  background: var(--color-tree-leaf);
   width: 100%;
   transform-origin: 0%;
   height: 3px;
   margin: 0;
 }
 
-.capped {
+.fileCard.capped {
   background: var(--color-bg-accent);
 }
 
 .fileCard .fileCard__moveButton {
-  background-color: #f0972f;
-  color: #fcfcfc;
+  background-color: var(--color-tree-root);
+  color: var(--color-bg);
   height: 30px;
   width: 30px;
   border: none;

src/components/upload/FileCard.tsx

@@ -33,7 +33,10 @@ const FileCard: FC<Props> = ({
   size = 0,
   cumSize = 0,
 }: Props) => {
-  const numberFormat = new Intl.NumberFormat();
+  const countFormat = new Intl.NumberFormat(undefined);
+  const weightFormat = new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 2,
+  });
 
   return (
     <div className={capped ? "fileCard capped" : "fileCard"}>
@@ -52,29 +55,26 @@ const FileCard: FC<Props> = ({
       <div className="fileCard__statGroup">
         <span className="fileCard__stats">
           <strong className="fileCard__stats__count">
-            {numberFormat.format(articles)}
+            {countFormat.format(articles)}
           </strong>
           <small className="fileCard__stats__unit">
             {articles === 1 ? "article" : "articles"}
           </small>
         </span>
         <span className="fileCard__stats">
           <strong className="fileCard__stats__count">
-            {numberFormat.format(citations)}
+            {countFormat.format(citations)}
           </strong>
           <small className="fileCard__stats__unit">
             {citations === 1 ? "citation" : "citations"}
           </small>
         </span>
-        <span className="fileCard__stats">
-          <small className="fileCard__stats__unit">
-            size: {numberFormat.format(round(size, 1))}MB
-          </small>
-          <small className="fileCard__stats__unit">
-            cum. size: {numberFormat.format(round(cumSize, 1))}MB/
-            {numberFormat.format(round(MAX_SIZE, 1))}MB
-          </small>
-        </span>
+      </div>
+      <div className="fileCard__weight">
+        <small title="To keep our costs down, we need to limit the ammount of data we process for each tree.">
+          {weightFormat.format(round(cumSize, 2))} /{" "}
+          {weightFormat.format(round(MAX_SIZE, 2))} [MB]
+        </small>
       </div>
       <div className="fileCard_progressBar">
         <div

src/components/upload/Home.tsx

@@ -15,7 +15,11 @@ import { round } from "../../utils/mathUtils";
 
 import "./Home.css";
 
-const numberFormat = new Intl.NumberFormat();
+const countFormat = new Intl.NumberFormat();
+const weightFormat = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
 
 const createTree = async ({
   app,
@@ -81,22 +85,21 @@ const Home: FC<{}> = () => {
       <div className="information-cant-article">
         <div className="frame-article">
           <span className="total-articles">
-            {numberFormat.format(articleCap)}/
-            {numberFormat.format(totalArticles)}
+            {countFormat.format(articleCap)}/{countFormat.format(totalArticles)}
           </span>
           <span className="articles">articles</span>
         </div>
         <div className="frame-article">
           <span className="total-articles">
-            {numberFormat.format(citationCap)}/
-            {numberFormat.format(totalCitations)}
+            {countFormat.format(citationCap)}/
+            {countFormat.format(totalCitations)}
           </span>
           <span className="articles">citations</span>
         </div>
         <div className="frame-article">
           <span className="total-articles">
-            {numberFormat.format(round(sizeCap, 1))}/
-            {numberFormat.format(round(MAX_SIZE, 1))}
+            {weightFormat.format(round(sizeCap, 2))}/
+            {weightFormat.format(round(MAX_SIZE, 2))}
           </span>
           <span className="articles">size [MB]</span>
         </div>

src/components/vectors/MoveFirstIcon.tsx

@@ -3,11 +3,15 @@ import React from "react";
 const MoveFirstIcon = () => (
   <svg
     className="move-icon"
+    viewBox="0 0 18 20"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 970.504 970.503"
   >
-    <path d="M120.027 962.802c26.6 0 53.5-8.801 75.7-27l288.1-234.7 290.899 237c22.301 18.1 49.101 27 75.7 27 34.8 0 69.4-15.101 93.101-44.2 41.899-51.4 34.1-127-17.2-168.8l-366.7-298.8c-44.1-36-107.5-36-151.6 0l-363.8 296.5c-51.4 41.8-59.1 117.399-17.3 168.8 23.8 29.1 58.3 44.2 93.1 44.2z" />
-    <path d="M120.027 541.902c26.6 0 53.5-8.8 75.7-27l288.1-234.7 290.899 237c22.301 18.101 49.101 27 75.7 27 34.8 0 69.4-15.1 93.101-44.2 41.899-51.399 34.1-127-17.2-168.8l-366.7-298.8c-44.1-36-107.5-36-151.6 0l-363.8 296.4c-51.4 41.9-59.1 117.5-17.3 168.9 23.8 29.1 58.3 44.2 93.1 44.2z" />
+    <path
+      d="M16 10L8 2M10 10l-8 8M16 18l-8-8M10 2l-8 8"
+      stroke="#FCFCFC"
+      stroke-width="3"
+    />
   </svg>
 );
 

src/index.css

@@ -370,6 +370,7 @@ template {
   --color-tree-trunk: #904c14;
   --color-bg: #fcfcfc;
   --color-bg-accent: #f0f0f0;
+  --color-red-accent: rgb(226, 132, 148);
   --color-link: #366fc6;
   --color-link-hover: #3a6099;
   --color-label: #5b5b5b;