Merge pull request #6 from KasarLabs/feat/front-corrects

Feat/front corrections + responsivity

frontend/src/App.css

@@ -38,3 +38,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-weight: 700;
 }
+
+@media (max-width: 900px) {
+  .App {
+    font-size: 12px;
+    min-width: 390px;
+    max-width: 500px;
+  }
+}

frontend/src/App.tsx

@@ -143,7 +143,7 @@ export default class App extends React.Component {
       : null;
 
     Ago.timeDiff = timeDiff;
-
+    //ICI
     if (chains.length === 0) {
       return (
         <div className="App App-no-telemetry">

frontend/src/components/Chain/Chain.css

@@ -35,10 +35,16 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 }
 
 .Chain-content {
-  min-height: 100%;
+  min-height: 50vh;
   color: #000;
   background-color: #fff;
   border-radius: 10px;
-  padding: 0px 10%;
+  margin: 0px 8%;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
 }
+
+@media (max-width: 900px) {
+  .Chain-content-container {
+    top: 270px;
+  }
+}

frontend/src/components/Chain/Header.css

@@ -135,3 +135,33 @@
   background-clip: text;
   color: transparent; /* Fallback for browsers that do not support text-fill-color */
 }
+
+@media (max-width: 900px) {
+  .Header {
+    min-width: 100%;
+    padding: 0px;
+  }
+  .Header-top-row {
+    padding: 20px;
+    gap: 50px;
+  }
+  .Header-row-first {
+    min-width: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+  .ImageIcon {
+    width: 40px;
+    height: 40px;
+  }
+  .button-outline {
+    padding: 5px 5px;
+    font-size: 10px;
+  }
+  .text-sm {
+    font-size: 8px;
+  }
+  .Header-row-second {
+    width: 100%;
+  }
+}

frontend/src/components/Chains.css

@@ -134,3 +134,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   background: #393838;
   color: #fff;
 }
+
+@media (max-width: 900px) {
+  .Chains {
+    padding: 0px;
+    min-width: 900px;
+  }
+}

frontend/src/components/List/THead.css

@@ -18,6 +18,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .THead {
   background: #e6936e;
+  width: 100%;
   color: #fff;
 }
 

frontend/src/components/Map/Map.css

@@ -27,3 +27,17 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   top: 0;
   bottom: 0;
 }
+
+@media (max-width: 900px) {
+  .Map {
+    min-width: 350px;
+    background: url('../../assets/world-map.svg') no-repeat;
+    background-size: contain;
+    background-position: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}

frontend/src/components/Settings/Settings.css

@@ -19,12 +19,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 .Settings {
   text-align: center;
   padding-top: 50px;
+  width: 100%;
 }
 
 .Settings-category {
   text-align: left;
   margin: 0 auto;
-  padding: 2em 0;
+  padding: 2em 20px;
+  min-width: 700px;
 }
 
 .Settings-category h2 {
@@ -33,3 +35,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   font-size: 20px;
   font-weight: 100;
 }
+
+@media (max-width: 900px) {
+  .Settings-category {
+    padding: 20px;
+    min-width: 300px;
+  }
+}

frontend/src/components/Stats/Stats.css

@@ -41,14 +41,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 }
 
 .Stats-percent {
-  width: 50%;
+  width: 20%;
   text-align: right;
   padding-left: 0.5rem;
   padding-right: 1rem;
 }
 
 .Stats-count {
-  width: 50%;
+  width: 20%;
   text-align: right;
   padding-right: 1.5rem;
   border-right: 1px solid black;

frontend/src/components/Tile.css

@@ -66,3 +66,19 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   color: black;
   border: none;
 }
+
+@media (max-width: 900px) {
+  .Tile {
+    font-size: 10px; /* Increased text size */
+    padding: 10px 0px;
+    margin: 10px;
+  }
+  .Tile-label {
+    background-color: transparent;
+    padding: 0px;
+    font-size: 10px; /* Increased text size */
+    font-weight: 800; /* Increased text weight */
+    color: black;
+    letter-spacing: 0px;
+  }
+}