Merge pull request #18 from leandrodalbo/change-colors

looking golden

.github/workflows/buildAndTest.yml

@@ -3,6 +3,8 @@ on:
   push:
     branches:
       - "*"
+      - '!master'
+      - '!main'
 jobs:
   build:
     name: Build

src/components/buyselltem/BuySellItem.tsx

@@ -9,7 +9,7 @@ export interface BuySellItemProps {
 
 export const BuySellItem = ({ value }: BuySellItemProps) => {
   return (
-    <span>
+    <span className="icon-wrapper">
       {value === "BUY" && (
         <FaArrowTrendUp className="uparrow" data-testid="arrowup" />
       )}

src/components/buyselltem/buysellitem.css

@@ -1,11 +1,20 @@
 .uparrow {
-  color: #19bb0e;
+  color: var(--bullish);
 }
 
 .dnarrow {
-  color: #b40606;
+  color: var(--bearish);
 }
 
 .arrows {
-  color: #0631b4;
+  color: var(--neutral);
 }
+
+.icon-wrapper {
+  display: inline-flex;
+  justify-content: right;
+  align-items: center;
+  width: 2rem; 
+  height: 2rem;
+  font-size: 1.8rem;
+}

src/components/controls/controls.css

@@ -2,34 +2,49 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: #009879;
-  background: #dddddd;
+  color: var(--second-control-text) ;
+  background: var(--second-control-bg);
   text-align: left;
 }
 
 .control {
   display: flex;
-  gap: 0.9rem;
+  gap: 0.8rem;
   justify-content: space-between;
   padding: 1rem 1.5rem;
   align-items: center;
+  text-transform: uppercase;
 }
 
 .control label select button {
   margin: 1rem 0.1rem;
-  padding: 1.2rem 0.3rem;
-  text-transform: capitalize;
+  padding: 1.1rem 0.2rem;
   text-decoration: solid;
 }
 
 .control input,
 select {
   border: 0;
-  background: #05eebf;
+  color: var(--control-text);
+  background: var(--color-secondary);
+  border-bottom: 1px solid var(--highlight);
 }
 
 .control button {
-  background-color: transparent;
+   color: var(--highlight);
+  text-transform: uppercase;
+  color: var(--color-secondary);
+  background: var(--control-bg);
+  padding: 0.1rem 1.3rem;
+  border: 1px solid var(--control-text);
+  letter-spacing: 0.1rem;
+  border-radius: 0.5rem;
+}
+
+.control button:hover{
+  background-color:var(--hover-bg);
+  color: var(--hover-text);
+  border-color: var(--highlight);
 }
 
 .control p {

src/components/head/head.css

@@ -1,4 +1,5 @@
 .withsort {
   display: flexbox;
   align-items: center;
-}
+  gap: 0.2rem;
+}

src/components/row/Row.tsx

@@ -1,3 +1,4 @@
+import "./row.css"
 import { Signal, signalKeys } from "../../types/types";
 import { unixToDate } from "../../utils/utils";
 import { BuySellItem } from "../buyselltem/BuySellItem";

src/components/row/row.css

@@ -0,0 +1,4 @@
+tr td{
+    text-align: left;
+    vertical-align: middle;
+}

src/components/tradingsignals.css

@@ -4,43 +4,39 @@ table {
   font-size: 0.9em;
   font-family: sans-serif;
   min-width: 400px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 20px var(--highlight);
 }
 
 thead tr {
-  background-color: #009879;
-  color: #ffffff;
+  background-color: var(--color-secondary);
+  color: var(--secondary-text);
   text-align: left;
+  font-size: smaller;
 }
 
 table th,
 table td {
-  padding: 12px 15px;
+  padding: 11px 15px;
 }
 
-table tbody tr {
-  border-bottom: 1px solid #dddddd;
-}
-
-table tbody tr:nth-of-type(even) {
-  background-color: #f3f3f3;
-}
-
-table tbody tr:last-of-type {
-  border-bottom: 2px solid #009879;
+table tbody tr {  
+  border-bottom: 2px solid var(--highlight);
+  color: var(--primary-text);
 }
 
 table tbody tr:hover {
   font-weight: bold;
-  color: #009879;
+  background-color: var(--hover-bg);
+  color: var(--hover-text);
 }
 
 .botom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow: hidden;
-  background: #dddddd;
+  background-color: var(--color-secondary);
+
   bottom: 0;
   width: 99%;
   position: fixed;
@@ -53,8 +49,8 @@ table tbody tr:hover {
   align-items: center;
   margin-top: 3px;
   padding: 10px 10px;
-  color: #009879;
   text-decoration: none;
   font-size: 1.8rem;
   text-transform: capitalize;
+  color: var(--secondary-text);
 }

src/index.css

@@ -7,3 +7,31 @@
   text-decoration: none;
   box-sizing: border-box;
 }
+
+:root {
+
+  --color-primary:#121212;
+  --color-secondary:#1E1E1E;
+
+  --primary-text:  #E0E0E0;
+  --secondary-text:  #A3A3A3 ;
+
+  --highlight : #FF8C00;
+  --bullish : #4CAF50;
+  --bearish : #FF5252;
+  --neutral: #42A5F5;
+
+  --control-bg: #FF8C00;
+  --control-text: #FFFFFF;
+
+  --second-control-bg: #1E1E1E;
+  --second-control-text: #FF8C00;
+
+  --hover-bg: #1A1A1A;
+  --hover-text: #FFFFFF;
+}
+
+body {
+  background: var(--color-primary);
+}
+

src/main.tsx

@@ -1,3 +1,4 @@
+import "./index.css"
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import TradingSignals from "./components/TradingSignals.tsx";
@@ -6,6 +7,6 @@ import axiosClient from "./ApiConf.ts";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <TradingSignals signalsService={new GetSignalsService(axiosClient)} />
+      <TradingSignals  signalsService={new GetSignalsService(axiosClient)} />
   </StrictMode>
 );