From d4b44ae126da670090347ad9b6b46257204e62f4 Mon Sep 17 00:00:00 2001 From: leandrodalbo Date: Sun, 22 Dec 2024 02:23:00 +0000 Subject: [PATCH] looking golden --- .github/workflows/buildAndTest.yml | 2 ++ src/components/buyselltem/BuySellItem.tsx | 2 +- src/components/buyselltem/buysellitem.css | 15 +++++++++--- src/components/controls/controls.css | 29 ++++++++++++++++------ src/components/head/head.css | 3 ++- src/components/row/Row.tsx | 1 + src/components/row/row.css | 4 +++ src/components/tradingsignals.css | 30 ++++++++++------------- src/index.css | 28 +++++++++++++++++++++ src/main.tsx | 3 ++- 10 files changed, 87 insertions(+), 30 deletions(-) create mode 100644 src/components/row/row.css diff --git a/.github/workflows/buildAndTest.yml b/.github/workflows/buildAndTest.yml index 78af66e..30d3783 100644 --- a/.github/workflows/buildAndTest.yml +++ b/.github/workflows/buildAndTest.yml @@ -3,6 +3,8 @@ on: push: branches: - "*" + - '!master' + - '!main' jobs: build: name: Build diff --git a/src/components/buyselltem/BuySellItem.tsx b/src/components/buyselltem/BuySellItem.tsx index 2f322d4..9f365ff 100644 --- a/src/components/buyselltem/BuySellItem.tsx +++ b/src/components/buyselltem/BuySellItem.tsx @@ -9,7 +9,7 @@ export interface BuySellItemProps { export const BuySellItem = ({ value }: BuySellItemProps) => { return ( - + {value === "BUY" && ( )} diff --git a/src/components/buyselltem/buysellitem.css b/src/components/buyselltem/buysellitem.css index 04a37b7..2d4171b 100644 --- a/src/components/buyselltem/buysellitem.css +++ b/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; +} \ No newline at end of file diff --git a/src/components/controls/controls.css b/src/components/controls/controls.css index aa612f7..7973ee5 100644 --- a/src/components/controls/controls.css +++ b/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 { diff --git a/src/components/head/head.css b/src/components/head/head.css index 7799609..06c1959 100644 --- a/src/components/head/head.css +++ b/src/components/head/head.css @@ -1,4 +1,5 @@ .withsort { display: flexbox; align-items: center; -} + gap: 0.2rem; +} \ No newline at end of file diff --git a/src/components/row/Row.tsx b/src/components/row/Row.tsx index 1b337c3..050e4d6 100644 --- a/src/components/row/Row.tsx +++ b/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"; diff --git a/src/components/row/row.css b/src/components/row/row.css new file mode 100644 index 0000000..e5a2665 --- /dev/null +++ b/src/components/row/row.css @@ -0,0 +1,4 @@ +tr td{ + text-align: left; + vertical-align: middle; +} \ No newline at end of file diff --git a/src/components/tradingsignals.css b/src/components/tradingsignals.css index 9e17175..1ffd63e 100644 --- a/src/components/tradingsignals.css +++ b/src/components/tradingsignals.css @@ -4,35 +4,30 @@ 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 { @@ -40,7 +35,8 @@ table tbody tr:hover { 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); } diff --git a/src/index.css b/src/index.css index d081407..47e9791 100644 --- a/src/index.css +++ b/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); +} + diff --git a/src/main.tsx b/src/main.tsx index b4d7468..cafe7b0 100644 --- a/src/main.tsx +++ b/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( - + );