From 4bbb800b41c9287e50ef1e06c32282c730ff77dd Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Tue, 29 Jun 2021 18:49:48 -0700 Subject: [PATCH 01/15] implimented year graph component --- src/components/YearGraph/YearGraph.tsx | 34 +++++++ src/components/YearGraph/YearGraphStyled.tsx | 90 +++++++++++++++++++ src/components/YearGraph/index.tsx | 4 + .../YearGraph/test/YearGraph.test.tsx | 1 + src/index.tsx | 7 +- 5 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 src/components/YearGraph/YearGraph.tsx create mode 100644 src/components/YearGraph/YearGraphStyled.tsx create mode 100644 src/components/YearGraph/index.tsx create mode 100644 src/components/YearGraph/test/YearGraph.test.tsx diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx new file mode 100644 index 0000000..612c252 --- /dev/null +++ b/src/components/YearGraph/YearGraph.tsx @@ -0,0 +1,34 @@ +// Written by Joey Essak- +// Imported Wrapper +import { Wrapper } from "./YearGraphStyled"; +// FirstContainer Imported +import { MainContainer } from "./YearGraphStyled"; +import { LabelOne } from "./YearGraphStyled"; +import { LabelTwo } from "./YearGraphStyled"; +import { LabelThree } from "./YearGraphStyled"; +// SecondContainer Imported +import { SecondContainer } from "./YearGraphStyled"; +import { LabelFour } from "./YearGraphStyled"; +import { LabelFive } from "./YearGraphStyled"; +import { LabelSix } from "./YearGraphStyled"; +import { LabelSeven } from "./YearGraphStyled"; +// Creating a YearGraph JSX Element +const YearGraph = ( ): JSX.Element => { + return ( + + + 19.00 + /\ + 0.10(0.53%) + + + 19.33 + /\ + 0.33(1.74%) + After Hours . June 29, 7:59PM EDT . Market Closed + + + ); +}; +// Exporting the created YearGraph JSX Element +export default YearGraph; \ No newline at end of file diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx new file mode 100644 index 0000000..cdd6d83 --- /dev/null +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -0,0 +1,90 @@ +// Written by Joey Essak- +// Importorting styled-comonents +import styled from "styled-components"; + +// Wrapper that goes around the First and Second Container +export const Wrapper = styled.div` +background-color: rgb(240, 239, 239); +height: 100vh; +padding-top: 40px; +` + +// First Container aka Main Container +export const MainContainer = styled.div` +background-color: white; +margin-left: 20px; +margin-right: 20px; +padding-top: 20px; +padding-left: 20px; +height: 100px; +border-radius: 10px; +border-color: black; +border-style: solid; +-webkit-box-shadow: 5px 5px 15px 5px #000000; +box-shadow: 5px 5px 15px 5px #000000; +` +// First Container- Label 1: +export const LabelOne = styled.label` +background-color: beige; +margin-right: 10px; +font-size:40px; +font-weight: 700; +` +// First Container- Label 2: +export const LabelTwo = styled.label` +background-color: beige; +margin-right: 10px; +` +// First Container- Label 3: +export const LabelThree = styled.label` +background-color: beige; +font-size: 30px; +font-weight: 700; +color: green; +`// -End- First Container--> + + +// Second Container +export const SecondContainer = styled.div` +background-color: white; +margin-top: 40px; +margin-left: 20px; +margin-right: 20px; +padding-top: 20px; +padding-left: 20px; +height: 100px; +border-radius: 10px; +border-color: black; +border-style: solid; +-webkit-box-shadow: 5px 5px 15px 5px #000000; +box-shadow: 5px 5px 15px 5px #000000; +` +// Second Container- Label 4: +export const LabelFour = styled.label` +background-color: beige; +margin-right: 10px; +color: grey; +font-size: 25px; +font-weight: 700; +` +// Second Container- Label 5: +export const LabelFive = styled.label` +background-color: beige; +margin-right: 10px; +` +// Second Container- Label 6: +export const LabelSix = styled.label` +background-color: beige; +margin-right: 10px; +font-size: 25px; +font-weight: 700; +color: green; +` +// Second Container- Label 7: +export const LabelSeven = styled.label` +background-color: beige; +color: grey; +font-size: 20px; +font-weight: 700; +`// -End- Second Container--> + \ No newline at end of file diff --git a/src/components/YearGraph/index.tsx b/src/components/YearGraph/index.tsx new file mode 100644 index 0000000..f4e0640 --- /dev/null +++ b/src/components/YearGraph/index.tsx @@ -0,0 +1,4 @@ +// Written by Joey Essak- +// YearGraph index.tsx file +import YearGraph from "./YearGraph"; +export { YearGraph }; \ No newline at end of file diff --git a/src/components/YearGraph/test/YearGraph.test.tsx b/src/components/YearGraph/test/YearGraph.test.tsx new file mode 100644 index 0000000..4eee36c --- /dev/null +++ b/src/components/YearGraph/test/YearGraph.test.tsx @@ -0,0 +1 @@ +import React from "react"; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index de46f4a..de36dea 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +// import App from './App'; import reportWebVitals from './reportWebVitals'; - +import YearGraph from './components/YearGraph/YearGraph' ReactDOM.render( - + {/* */} + , document.getElementById('root') ); From a48c4c6ac4dedced5f7a3fdbdf76e5b0c8a4f874 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Thu, 1 Jul 2021 11:41:46 -0700 Subject: [PATCH 02/15] Updated YearGraph Component-- Progress updates --- src/components/YearGraph/YearGraph.tsx | 27 +++- src/components/YearGraph/YearGraphStyled.tsx | 132 +++++++++++++++---- 2 files changed, 135 insertions(+), 24 deletions(-) diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 612c252..24582a5 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -12,6 +12,18 @@ import { LabelFour } from "./YearGraphStyled"; import { LabelFive } from "./YearGraphStyled"; import { LabelSix } from "./YearGraphStyled"; import { LabelSeven } from "./YearGraphStyled"; +// ThirdContainer Imported +import { ThirdContainer } from "./YearGraphStyled"; +import { ButtonOne } from "./YearGraphStyled"; +import { ButtonTwo } from "./YearGraphStyled"; +import { ButtonThree } from "./YearGraphStyled"; +import { ButtonFour } from "./YearGraphStyled"; +import { ButtonFive } from "./YearGraphStyled"; +import { ButtonSix } from "./YearGraphStyled"; +// FourthContainer Imported +import { FourthContainer } from "./YearGraphStyled"; +import { StockChartPlaceholder } from "./YearGraphStyled"; +import { PlaceholderMessage } from "./YearGraphStyled"; // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( @@ -22,11 +34,24 @@ const YearGraph = ( ): JSX.Element => { 0.10(0.53%) - 19.33 + 19.33 /\ 0.33(1.74%) After Hours . June 29, 7:59PM EDT . Market Closed + + Day + Week + Month + Year + 5 Year + Max + + + + I am a really cool 3d stock chart and this is my temporary placeholder I update in realtime and show you the Money! + + ); }; diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index cdd6d83..fbc946c 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -5,23 +5,27 @@ import styled from "styled-components"; // Wrapper that goes around the First and Second Container export const Wrapper = styled.div` background-color: rgb(240, 239, 239); -height: 100vh; +padding-left:50px; +padding-right: 50px; +padding-bottom: 40px; +margin-top: 50px; +//height: 100vh; +margin-left: 60px; +margin-right: 60px; padding-top: 40px; +border-radius: 10px; +border-color: rgb(255, 0, 0); +border-style: solid; ` // First Container aka Main Container export const MainContainer = styled.div` +padding-left: 10px; +padding-top: 10px; +padding-bottom: 10px; background-color: white; -margin-left: 20px; -margin-right: 20px; -padding-top: 20px; -padding-left: 20px; -height: 100px; -border-radius: 10px; -border-color: black; -border-style: solid; --webkit-box-shadow: 5px 5px 15px 5px #000000; -box-shadow: 5px 5px 15px 5px #000000; +display: flex; +align-items: flex-end; ` // First Container- Label 1: export const LabelOne = styled.label` @@ -41,23 +45,16 @@ background-color: beige; font-size: 30px; font-weight: 700; color: green; +margin-right: 10px; `// -End- First Container--> // Second Container export const SecondContainer = styled.div` +padding-left: 10px; background-color: white; -margin-top: 40px; -margin-left: 20px; -margin-right: 20px; -padding-top: 20px; -padding-left: 20px; -height: 100px; -border-radius: 10px; -border-color: black; -border-style: solid; --webkit-box-shadow: 5px 5px 15px 5px #000000; -box-shadow: 5px 5px 15px 5px #000000; +display: flex; +flex-direction: row; ` // Second Container- Label 4: export const LabelFour = styled.label` @@ -66,11 +63,13 @@ margin-right: 10px; color: grey; font-size: 25px; font-weight: 700; +align-items:center; ` // Second Container- Label 5: export const LabelFive = styled.label` background-color: beige; margin-right: 10px; +align-items:center; ` // Second Container- Label 6: export const LabelSix = styled.label` @@ -79,6 +78,7 @@ margin-right: 10px; font-size: 25px; font-weight: 700; color: green; +align-items:center; ` // Second Container- Label 7: export const LabelSeven = styled.label` @@ -86,5 +86,91 @@ background-color: beige; color: grey; font-size: 20px; font-weight: 700; +align-items:center; `// -End- Second Container--> - \ No newline at end of file + + +// Third Container +export const ThirdContainer = styled.div` +padding-left: 10px; +background-color: white; +display: flex; +flex-direction: row; +padding-top: 10px; +padding-bottom: 10px; +align-self: flex-start; +` +// Third Container- Button 1: +export const ButtonOne = styled.button` +margin-right: 20px; +width: 150px; +height: 40px; +border-radius: 40px; +color: blue; +` +// Third Container- Button 2: +export const ButtonTwo = styled.button` +margin-right: 20px; +width: 150px; +border-radius: 40px; +color: blue; +` +// Third Container- Button 3: +export const ButtonThree = styled.button` +margin-right: 20px; +width: 150px; +border-radius: 40px; +color: blue; +` +// Third Container- Button 4: +export const ButtonFour = styled.button` +margin-right: 20px; +width: 150px; +border-radius: 40px; +color: blue; +` +// Third Container- Button 5: +export const ButtonFive = styled.button` +margin-right: 20px; +width: 150px; +border-radius: 40px; +color: blue; +` +// Third Container- Button 6: +export const ButtonSix = styled.button` +margin-right: 20px; +width: 150px; +border-radius: 40px; +color: blue; +`// -End- Third Container--> + + +// Fourth Container +export const FourthContainer = styled.div` +padding-left: 10px; +padding-right: 10px; +background-color: white; +display: flex; +flex-direction: row; +padding-top: 10px; +padding-bottom: 10px; +align-items: center; +border-style: solid; +border-color: orange; +` +// Fourth Container- StockChartPlaceholder +export const StockChartPlaceholder = styled.div` +height: 400px; +width: 100vw; +background-color: green; +display: flex; +justify-content: center; +align-items: center; +` +// Fourth Container- PlaceholderMessage +export const PlaceholderMessage = styled.p` +font-size: 20px; +font-weight: bold; +color:white; +padding-left: 10px; +` \ No newline at end of file From da564070d65a23f307e63f8111aa2ebafa1b31d4 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Thu, 1 Jul 2021 22:01:58 -0700 Subject: [PATCH 03/15] Updated YearGraph Component- Layout --- src/components/YearGraph/YearGraph.tsx | 29 +++++ src/components/YearGraph/YearGraphStyled.tsx | 106 ++++++++++++++++++- 2 files changed, 132 insertions(+), 3 deletions(-) diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 24582a5..af47ba0 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -24,6 +24,19 @@ import { ButtonSix } from "./YearGraphStyled"; import { FourthContainer } from "./YearGraphStyled"; import { StockChartPlaceholder } from "./YearGraphStyled"; import { PlaceholderMessage } from "./YearGraphStyled"; +// FifthContainer Imported +import { FifthContainer } from "./YearGraphStyled"; +import { BlockOne } from "./YearGraphStyled"; +import { BlockOneMessage } from "./YearGraphStyled"; +import { BlockTwo } from "./YearGraphStyled"; +import { BlockTwoMessage } from "./YearGraphStyled"; +import { BlockThree } from "./YearGraphStyled"; +import { BlockThreeMessage } from "./YearGraphStyled"; +// SixthContainer Imported +import { SixthContainer } from "./YearGraphStyled"; +import { TitleText } from "./YearGraphStyled"; +import { Subtext } from "./YearGraphStyled"; +import { ButtonSeven } from "./YearGraphStyled"; // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( @@ -52,6 +65,22 @@ const YearGraph = ( ): JSX.Element => { I am a really cool 3d stock chart and this is my temporary placeholder I update in realtime and show you the Money! + + + Open + + + P/E + + + Vol + + + + Break Time + This is awesome I think you got some what a grasp on this joey! + Follow + ); }; diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index fbc946c..9091e18 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -53,8 +53,8 @@ margin-right: 10px; export const SecondContainer = styled.div` padding-left: 10px; background-color: white; -display: flex; -flex-direction: row; +display: flex; +align-items: flex-end; ` // Second Container- Label 4: export const LabelFour = styled.label` @@ -63,7 +63,7 @@ margin-right: 10px; color: grey; font-size: 25px; font-weight: 700; -align-items:center; +align-items: center; ` // Second Container- Label 5: export const LabelFive = styled.label` @@ -173,4 +173,104 @@ font-size: 20px; font-weight: bold; color:white; padding-left: 10px; +`// -End- Fourth Container--> + + +// Fifth Container +export const FifthContainer = styled.div` +padding-left: 10px; +padding-right: 10px; +background-color: white; +display: grid; +grid-template-columns: 1fr 1fr 1fr; +padding-top: 10px; +padding-bottom: 10px; +align-items: center; +border-style: solid; +border-color: #00fffb; +` +// Fifth Container- BlockOne +export const BlockOne = styled.div` +justify-self: stretch; +height: 200px; +background-color: red; +` +// Fourth Container- BlockOneMessage +export const BlockOneMessage = styled.p` +font-size: 20px; +font-weight: bold; +color:white; +padding-left: 10px; +` +// Fifth Container- BlockTwo +export const BlockTwo = styled.div` +justify-self: stretch; +height: 200px; +background-color:green; +` +// Fourth Container- BlockTwoMessage +export const BlockTwoMessage = styled.p` +font-size: 20px; +font-weight: bold; +color:white; +padding-left: 10px; +` +// Fifth Container- BlockThree +export const BlockThree = styled.div` +justify-self: stretch; +height: 200px; +background-color: blue; +` +// Fourth Container- BlockThreeMessage +export const BlockThreeMessage = styled.p` +font-size: 20px; +font-weight: bold; +color:white; +padding-left: 10px; +` + + +// Sixth Container +export const SixthContainer = styled.div` +padding-left: 10px; +padding-right: 10px; +background-color: white; +display: grid; +grid-template-columns: 1fr 1fr 1fr; +grid-template-rows: auto; +// Defining: grid template- for objects +grid-template-areas: + "label-Title label-Title button" + "label-Subtext label-Subtext button"; +// -End- grid template--> +padding-top: 10px; +padding-bottom: 10px; +align-items: center; +border-style: solid; +border-color: #1900ff; +` +// Sixth Container- TitleText +export const TitleText = styled.label` +grid-area: label-Title; +font-size: 20px; +font-weight: bold; +color:black; +padding-left: 10px; +` +// Sixth Container- SubText +export const Subtext = styled.label` +grid-area: label-Subtext; +font-size: 15px; +color:black; +padding-left: 10px; +` +// Sixth Container- Button 7: +export const ButtonSeven = styled.button` +grid-area:button; +justify-self: end; +margin-right: 20px; +width: 150px; +height: 40px; +border-radius: 10px; +color: blue; ` \ No newline at end of file From 7e6c4754d70163a1d9455261294c880dcb3dc24c Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Fri, 2 Jul 2021 09:48:15 -0700 Subject: [PATCH 04/15] Updated YearGraph Component- Media query ready --- src/components/YearGraph/YearGraphStyled.tsx | 39 +++++++------------- 1 file changed, 14 insertions(+), 25 deletions(-) diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index 9091e18..f885bdc 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -31,24 +31,24 @@ align-items: flex-end; export const LabelOne = styled.label` background-color: beige; margin-right: 10px; -font-size:40px; +font-size:2vw; font-weight: 700; ` // First Container- Label 2: export const LabelTwo = styled.label` background-color: beige; margin-right: 10px; +font-size:1vw; ` // First Container- Label 3: export const LabelThree = styled.label` background-color: beige; -font-size: 30px; +font-size:2vw; font-weight: 700; color: green; margin-right: 10px; `// -End- First Container--> - // Second Container export const SecondContainer = styled.div` padding-left: 10px; @@ -61,7 +61,7 @@ export const LabelFour = styled.label` background-color: beige; margin-right: 10px; color: grey; -font-size: 25px; +font-size:1.5vw; font-weight: 700; align-items: center; ` @@ -70,12 +70,13 @@ export const LabelFive = styled.label` background-color: beige; margin-right: 10px; align-items:center; +font-size:1vw; ` // Second Container- Label 6: export const LabelSix = styled.label` background-color: beige; margin-right: 10px; -font-size: 25px; +font-size:1.5vw; font-weight: 700; color: green; align-items:center; @@ -84,67 +85,58 @@ align-items:center; export const LabelSeven = styled.label` background-color: beige; color: grey; -font-size: 20px; +font-size:1vw; font-weight: 700; align-items:center; `// -End- Second Container--> - // Third Container export const ThirdContainer = styled.div` -padding-left: 10px; background-color: white; display: flex; flex-direction: row; +justify-content:space-between; padding-top: 10px; padding-bottom: 10px; -align-self: flex-start; ` // Third Container- Button 1: export const ButtonOne = styled.button` -margin-right: 20px; width: 150px; height: 40px; -border-radius: 40px; +border-radius: 10px; color: blue; ` // Third Container- Button 2: export const ButtonTwo = styled.button` -margin-right: 20px; width: 150px; -border-radius: 40px; +border-radius: 10px; color: blue; ` // Third Container- Button 3: export const ButtonThree = styled.button` -margin-right: 20px; width: 150px; -border-radius: 40px; +border-radius: 10px; color: blue; ` // Third Container- Button 4: export const ButtonFour = styled.button` -margin-right: 20px; width: 150px; -border-radius: 40px; +border-radius: 10px; color: blue; ` // Third Container- Button 5: export const ButtonFive = styled.button` -margin-right: 20px; width: 150px; -border-radius: 40px; +border-radius: 10px; color: blue; ` // Third Container- Button 6: export const ButtonSix = styled.button` -margin-right: 20px; width: 150px; -border-radius: 40px; +border-radius: 10px; color: blue; `// -End- Third Container--> - // Fourth Container export const FourthContainer = styled.div` padding-left: 10px; @@ -175,7 +167,6 @@ color:white; padding-left: 10px; `// -End- Fourth Container--> - // Fifth Container export const FifthContainer = styled.div` padding-left: 10px; @@ -228,8 +219,6 @@ font-weight: bold; color:white; padding-left: 10px; ` - - // Sixth Container export const SixthContainer = styled.div` padding-left: 10px; From 4af34b5c3934097d37416936ad5f9a80b799f362 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Tue, 6 Jul 2021 13:26:44 -0700 Subject: [PATCH 05/15] Updated Year Graph Component- Added Media rules --- src/components/YearGraph/YearGraphStyled.tsx | 80 ++++++++++++++++++-- 1 file changed, 72 insertions(+), 8 deletions(-) diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index f885bdc..fced6da 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -31,22 +31,32 @@ align-items: flex-end; export const LabelOne = styled.label` background-color: beige; margin-right: 10px; -font-size:2vw; +font-size:24px; font-weight: 700; +@media only screen and (max-width: 1041px) { + font-size:18px; + } ` // First Container- Label 2: export const LabelTwo = styled.label` background-color: beige; margin-right: 10px; -font-size:1vw; +font-size:24px; +@media only screen and (max-width: 1041px) { + font-size:18px; + } ` // First Container- Label 3: export const LabelThree = styled.label` background-color: beige; -font-size:2vw; +font-size:24px; font-weight: 700; color: green; margin-right: 10px; +@media only screen and (max-width: 1041px) { + font-size:18px; + + } `// -End- First Container--> // Second Container @@ -61,33 +71,46 @@ export const LabelFour = styled.label` background-color: beige; margin-right: 10px; color: grey; -font-size:1.5vw; +font-size:24px; font-weight: 700; align-items: center; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Second Container- Label 5: export const LabelFive = styled.label` background-color: beige; margin-right: 10px; align-items:center; -font-size:1vw; +font-size:24px; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Second Container- Label 6: export const LabelSix = styled.label` background-color: beige; margin-right: 10px; -font-size:1.5vw; +font-size:24px; font-weight: 700; color: green; align-items:center; +@media only screen and (max-width: 1041px) { + + display: none !important; + } ` // Second Container- Label 7: export const LabelSeven = styled.label` background-color: beige; color: grey; -font-size:1vw; +font-size:24px; font-weight: 700; align-items:center; +@media only screen and (max-width: 1041px) { + font-size:18px; + } `// -End- Second Container--> // Third Container @@ -95,46 +118,70 @@ export const ThirdContainer = styled.div` background-color: white; display: flex; flex-direction: row; -justify-content:space-between; + padding-top: 10px; +padding-left: 10px; padding-bottom: 10px; ` // Third Container- Button 1: export const ButtonOne = styled.button` width: 150px; height: 40px; +margin-right: 20px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Third Container- Button 2: export const ButtonTwo = styled.button` +margin-right: 20px; width: 150px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Third Container- Button 3: export const ButtonThree = styled.button` +margin-right: 20px; width: 150px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Third Container- Button 4: export const ButtonFour = styled.button` +margin-right: 20px; width: 150px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Third Container- Button 5: export const ButtonFive = styled.button` +margin-right: 20px; width: 150px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } ` // Third Container- Button 6: export const ButtonSix = styled.button` width: 150px; border-radius: 10px; color: blue; +@media only screen and (max-width: 1041px) { + display: none !important; + } `// -End- Third Container--> // Fourth Container @@ -179,12 +226,22 @@ padding-bottom: 10px; align-items: center; border-style: solid; border-color: #00fffb; +@media only screen and (max-width: 1041px) { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + grid-gap: 10px; + justify-self: stretch; + } ` // Fifth Container- BlockOne export const BlockOne = styled.div` justify-self: stretch; height: 200px; background-color: red; +@media only screen and (max-width: 1041px) { + + + } ` // Fourth Container- BlockOneMessage export const BlockOneMessage = styled.p` @@ -198,6 +255,9 @@ export const BlockTwo = styled.div` justify-self: stretch; height: 200px; background-color:green; +@media only screen and (max-width: 1041px) { + + } ` // Fourth Container- BlockTwoMessage export const BlockTwoMessage = styled.p` @@ -211,6 +271,10 @@ export const BlockThree = styled.div` justify-self: stretch; height: 200px; background-color: blue; +@media only screen and (max-width: 1041px) { + + + } ` // Fourth Container- BlockThreeMessage export const BlockThreeMessage = styled.p` From 499e7465240f0d34fd3dfdee7862206c3028a904 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Tue, 6 Jul 2021 23:50:45 -0700 Subject: [PATCH 06/15] Added FontAwesome Into project made changes to UI --- package.json | 7 ++- src/components/YearGraph/YearGraph.tsx | 7 ++- src/components/YearGraph/YearGraphStyled.tsx | 51 ++++++++++---------- yarn.lock | 26 ++++++++++ 4 files changed, 62 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index b459066..f8dc25e 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.1.10", @@ -10,14 +13,14 @@ "@types/node": "^15.6.0", "@types/react": "^17.0.6", "@types/react-dom": "^17.0.5", + "@types/react-router-dom": "^5.1.7", + "@types/styled-components": "^5.1.9", "eslint": "^7.27.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.3", "styled-components": "^5.3.0", - "@types/react-router-dom": "^5.1.7", - "@types/styled-components": "^5.1.9", "typescript": "^4.2.4", "web-vitals": "^1.0.1" }, diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index af47ba0..3a6e699 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -1,4 +1,7 @@ // Written by Joey Essak- +// Imported Font Awesome Icons +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faCaretUp } from '@fortawesome/free-solid-svg-icons' // Imported Wrapper import { Wrapper } from "./YearGraphStyled"; // FirstContainer Imported @@ -43,12 +46,12 @@ const YearGraph = ( ): JSX.Element => { 19.00 - /\ + 0.10(0.53%) 19.33 - /\ + 0.33(1.74%) After Hours . June 29, 7:59PM EDT . Market Closed diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index fced6da..6899c76 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; // Wrapper that goes around the First and Second Container export const Wrapper = styled.div` -background-color: rgb(240, 239, 239); +background-color: rgb(255, 255, 255); padding-left:50px; padding-right: 50px; padding-bottom: 40px; @@ -14,8 +14,9 @@ margin-left: 60px; margin-right: 60px; padding-top: 40px; border-radius: 10px; -border-color: rgb(255, 0, 0); -border-style: solid; +border-color: grey; +border-style: double; +filter: drop-shadow(0 0 0.75rem grey); ` // First Container aka Main Container @@ -29,7 +30,7 @@ align-items: flex-end; ` // First Container- Label 1: export const LabelOne = styled.label` -background-color: beige; + margin-right: 10px; font-size:24px; font-weight: 700; @@ -39,16 +40,16 @@ font-weight: 700; ` // First Container- Label 2: export const LabelTwo = styled.label` -background-color: beige; + margin-right: 10px; -font-size:24px; +font-size:30px; @media only screen and (max-width: 1041px) { font-size:18px; } ` // First Container- Label 3: export const LabelThree = styled.label` -background-color: beige; + font-size:24px; font-weight: 700; color: green; @@ -68,7 +69,7 @@ align-items: flex-end; ` // Second Container- Label 4: export const LabelFour = styled.label` -background-color: beige; + margin-right: 10px; color: grey; font-size:24px; @@ -80,17 +81,17 @@ align-items: center; ` // Second Container- Label 5: export const LabelFive = styled.label` -background-color: beige; + margin-right: 10px; -align-items:center; -font-size:24px; +align-self: flex-end; +font-size:30px; @media only screen and (max-width: 1041px) { display: none !important; } ` // Second Container- Label 6: export const LabelSix = styled.label` -background-color: beige; + margin-right: 10px; font-size:24px; font-weight: 700; @@ -103,7 +104,7 @@ align-items:center; ` // Second Container- Label 7: export const LabelSeven = styled.label` -background-color: beige; + color: grey; font-size:24px; font-weight: 700; @@ -191,17 +192,16 @@ padding-right: 10px; background-color: white; display: flex; flex-direction: row; -padding-top: 10px; + padding-bottom: 10px; align-items: center; -border-style: solid; -border-color: orange; +; ` // Fourth Container- StockChartPlaceholder export const StockChartPlaceholder = styled.div` height: 400px; width: 100vw; -background-color: green; +background-color: #969696; display: flex; justify-content: center; align-items: center; @@ -212,6 +212,7 @@ font-size: 20px; font-weight: bold; color:white; padding-left: 10px; + `// -End- Fourth Container--> // Fifth Container @@ -220,12 +221,12 @@ padding-left: 10px; padding-right: 10px; background-color: white; display: grid; +grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; -padding-top: 10px; + padding-bottom: 10px; align-items: center; -border-style: solid; -border-color: #00fffb; + @media only screen and (max-width: 1041px) { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); @@ -237,7 +238,7 @@ border-color: #00fffb; export const BlockOne = styled.div` justify-self: stretch; height: 200px; -background-color: red; +background-color:#c7c4c4; @media only screen and (max-width: 1041px) { @@ -254,7 +255,7 @@ padding-left: 10px; export const BlockTwo = styled.div` justify-self: stretch; height: 200px; -background-color:green; +background-color:#969696; @media only screen and (max-width: 1041px) { } @@ -270,7 +271,7 @@ padding-left: 10px; export const BlockThree = styled.div` justify-self: stretch; height: 200px; -background-color: blue; +background-color: #c7c4c4; @media only screen and (max-width: 1041px) { @@ -299,8 +300,8 @@ grid-template-areas: padding-top: 10px; padding-bottom: 10px; align-items: center; -border-style: solid; -border-color: #1900ff; +/* border-style: solid; +border-color: #1900ff; */ ` // Sixth Container- TitleText export const TitleText = styled.label` diff --git a/yarn.lock b/yarn.lock index 146f646..1c20590 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1302,6 +1302,32 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@^0.2.35": + version "0.2.35" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9" + integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw== + +"@fortawesome/fontawesome-svg-core@^1.2.35": + version "1.2.35" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff" + integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + +"@fortawesome/free-solid-svg-icons@^5.15.3": + version "5.15.3" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8" + integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + +"@fortawesome/react-fontawesome@^0.1.14": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca" + integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA== + dependencies: + prop-types "^15.7.2" + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz" From 1c05f85fa661a67433a9979c9f054f5966f992a0 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Wed, 7 Jul 2021 13:59:31 -0700 Subject: [PATCH 07/15] Updayed UI added links --- package.json | 1 + src/components/YearGraph/YearGraph.tsx | 14 ++- src/components/YearGraph/YearGraphStyled.tsx | 99 +++++++++++++++----- yarn.lock | 7 ++ 4 files changed, 96 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index f8dc25e..3b8e157 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^5.11.4", diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 3a6e699..afec363 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -2,6 +2,7 @@ // Imported Font Awesome Icons import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCaretUp } from '@fortawesome/free-solid-svg-icons' +import { faStar } from '@fortawesome/free-regular-svg-icons' // Imported Wrapper import { Wrapper } from "./YearGraphStyled"; // FirstContainer Imported @@ -40,6 +41,9 @@ import { SixthContainer } from "./YearGraphStyled"; import { TitleText } from "./YearGraphStyled"; import { Subtext } from "./YearGraphStyled"; import { ButtonSeven } from "./YearGraphStyled"; +import { StyledLink } from './YearGraphStyled'; +import { StyledLinkTwo } from './YearGraphStyled'; + // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( @@ -65,7 +69,9 @@ const YearGraph = ( ): JSX.Element => { - I am a really cool 3d stock chart and this is my temporary placeholder I update in realtime and show you the Money! + + I am a really cool 3d stock chart and this is my temporary placeholder I update in realtime and show you the Money! + @@ -80,9 +86,9 @@ const YearGraph = ( ): JSX.Element => { - Break Time - This is awesome I think you got some what a grasp on this joey! - Follow + Track this stock + Get the latest quotes in your watchlist and receive email and browser notifications + Follow ); diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index 6899c76..71d81b9 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -32,7 +32,7 @@ align-items: flex-end; export const LabelOne = styled.label` margin-right: 10px; -font-size:24px; +font-size:54px; font-weight: 700; @media only screen and (max-width: 1041px) { font-size:18px; @@ -42,6 +42,7 @@ font-weight: 700; export const LabelTwo = styled.label` margin-right: 10px; +color: green; font-size:30px; @media only screen and (max-width: 1041px) { font-size:18px; @@ -85,6 +86,7 @@ export const LabelFive = styled.label` margin-right: 10px; align-self: flex-end; font-size:30px; +color: green; @media only screen and (max-width: 1041px) { display: none !important; } @@ -94,7 +96,7 @@ export const LabelSix = styled.label` margin-right: 10px; font-size:24px; -font-weight: 700; +font-weight: 600; color: green; align-items:center; @media only screen and (max-width: 1041px) { @@ -119,7 +121,7 @@ export const ThirdContainer = styled.div` background-color: white; display: flex; flex-direction: row; - +margin-top: 10px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; @@ -127,20 +129,33 @@ padding-bottom: 10px; // Third Container- Button 1: export const ButtonOne = styled.button` width: 150px; -height: 40px; +height: 50px; margin-right: 20px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } ` // Third Container- Button 2: export const ButtonTwo = styled.button` + margin-right: 20px; width: 150px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } @@ -149,8 +164,14 @@ color: blue; export const ButtonThree = styled.button` margin-right: 20px; width: 150px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } @@ -159,8 +180,14 @@ color: blue; export const ButtonFour = styled.button` margin-right: 20px; width: 150px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } @@ -169,8 +196,14 @@ color: blue; export const ButtonFive = styled.button` margin-right: 20px; width: 150px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } @@ -178,8 +211,14 @@ color: blue; // Third Container- Button 6: export const ButtonSix = styled.button` width: 150px; -border-radius: 10px; -color: blue; +border-radius: 30px; +color: #666565; +font-size: 18px; +font-weight: bold; +&:hover { + background-color: #6d6d6d; + color: white; + } @media only screen and (max-width: 1041px) { display: none !important; } @@ -306,7 +345,7 @@ border-color: #1900ff; */ // Sixth Container- TitleText export const TitleText = styled.label` grid-area: label-Title; -font-size: 20px; +font-size: 25px; font-weight: bold; color:black; padding-left: 10px; @@ -314,17 +353,35 @@ padding-left: 10px; // Sixth Container- SubText export const Subtext = styled.label` grid-area: label-Subtext; -font-size: 15px; +font-size: 20px; color:black; padding-left: 10px; ` +// Sixth Container- StyledLink +export const StyledLink = styled.a` +text-decoration: none; +font-weight: bold; +` +// Sixth Container- StyledLinkTwo +export const StyledLinkTwo = styled.a` +text-decoration: none; +color: #0aa9e2; +font-weight: bold; +` + // Sixth Container- Button 7: export const ButtonSeven = styled.button` grid-area:button; justify-self: end; +justify-content: space-between; +font-size: 18px; +font-weight: bold; margin-right: 20px; width: 150px; -height: 40px; -border-radius: 10px; -color: blue; +height: 50px; +color: grey; +&:hover { + background-color: #6d6d6d; + color: white; + } ` \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1c20590..99ad2b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1314,6 +1314,13 @@ dependencies: "@fortawesome/fontawesome-common-types" "^0.2.35" +"@fortawesome/free-regular-svg-icons@^5.15.3": + version "5.15.3" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6" + integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + "@fortawesome/free-solid-svg-icons@^5.15.3": version "5.15.3" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8" From 9b917035fb504c87a389bfe495e648733c2ee1ac Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Wed, 7 Jul 2021 18:58:03 -0700 Subject: [PATCH 08/15] Added Fourth Container Block and UI updates --- src/components/YearGraph/YearGraph.tsx | 91 +++++- src/components/YearGraph/YearGraphStyled.tsx | 317 ++++++++++++++++--- 2 files changed, 357 insertions(+), 51 deletions(-) diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index afec363..a26d522 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -31,11 +31,40 @@ import { PlaceholderMessage } from "./YearGraphStyled"; // FifthContainer Imported import { FifthContainer } from "./YearGraphStyled"; import { BlockOne } from "./YearGraphStyled"; -import { BlockOneMessage } from "./YearGraphStyled"; +import { BlockOneContainerOne } from './YearGraphStyled'; +import { BlockOneLabelOne } from './YearGraphStyled'; +import { BlockOneLabelTwo } from './YearGraphStyled'; +import { BlockOneContainerTwo } from './YearGraphStyled'; +import { BlockOneLabelThree } from './YearGraphStyled'; +import { BlockOneLabelFour } from './YearGraphStyled'; +import { BlockOneContainerThree } from './YearGraphStyled'; +import { BlockOneLabelFive } from './YearGraphStyled'; +import { BlockOneLabelSix } from './YearGraphStyled'; + import { BlockTwo } from "./YearGraphStyled"; -import { BlockTwoMessage } from "./YearGraphStyled"; +import { BlockTwoContainerOne } from './YearGraphStyled'; +import { BlockTwoLabelOne } from './YearGraphStyled'; +import { BlockTwoLabelTwo } from './YearGraphStyled'; +import { BlockTwoContainerTwo } from './YearGraphStyled'; +import { BlockTwoLabelThree } from './YearGraphStyled'; +import { BlockTwoLabelFour } from './YearGraphStyled'; +import { BlockTwoContainerThree } from './YearGraphStyled'; +import { BlockTwoLabelFive } from './YearGraphStyled'; +import { BlockTwoLabelSix } from './YearGraphStyled'; + + import { BlockThree } from "./YearGraphStyled"; -import { BlockThreeMessage } from "./YearGraphStyled"; +import { BlockThreeContainerOne } from './YearGraphStyled'; +import { BlockThreeContainerTwo } from './YearGraphStyled'; +import { BlockThreeContainerThree } from './YearGraphStyled'; +import { BlockThreeLabelOne } from './YearGraphStyled'; +import { BlockThreeLabelTwo } from './YearGraphStyled'; +import { BlockThreeLabelThree } from './YearGraphStyled'; +import { BlockThreeLabelFour } from './YearGraphStyled'; +import { BlockThreeLabelFive } from './YearGraphStyled'; +import { BlockThreeLabelSix } from './YearGraphStyled'; + + // SixthContainer Imported import { SixthContainer } from "./YearGraphStyled"; import { TitleText } from "./YearGraphStyled"; @@ -44,21 +73,25 @@ import { ButtonSeven } from "./YearGraphStyled"; import { StyledLink } from './YearGraphStyled'; import { StyledLinkTwo } from './YearGraphStyled'; + // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( 19.00 - + 0.10(0.53%) + 19.33 - + 0.33(1.74%) After Hours . June 29, 7:59PM EDT . Market Closed + + Day Week @@ -67,6 +100,8 @@ const YearGraph = ( ): JSX.Element => { 5 Year Max + + @@ -75,14 +110,54 @@ const YearGraph = ( ): JSX.Element => { + - Open + + Open + 18.08 + + + High + 19.97 + + + Low + 17.99 + + + + - P/E + + P/E + - + + + 52wk High + 23.99 + + + 52wk Low + 5.63 + + + + - Vol + + Vol + 14.04 M + + + Avg Vol + 2.49 M + + + Mkt Cap + 2.79 B + diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index 71d81b9..e2e3b5d 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -13,9 +13,10 @@ margin-top: 50px; margin-left: 60px; margin-right: 60px; padding-top: 40px; -border-radius: 10px; -border-color: grey; -border-style: double; +border-radius: 20px; +border-color: #004d40; +border-style: solid; +border-width: 10px; filter: drop-shadow(0 0 0.75rem grey); ` @@ -231,16 +232,16 @@ padding-right: 10px; background-color: white; display: flex; flex-direction: row; - padding-bottom: 10px; align-items: center; -; ` // Fourth Container- StockChartPlaceholder export const StockChartPlaceholder = styled.div` height: 400px; width: 100vw; -background-color: #969696; + +background: linear-gradient(to bottom, white, #004d40 ); + color: white; display: flex; justify-content: center; align-items: center; @@ -251,37 +252,122 @@ font-size: 20px; font-weight: bold; color:white; padding-left: 10px; - `// -End- Fourth Container--> + + + + + + + + + + + + // Fifth Container export const FifthContainer = styled.div` padding-left: 10px; padding-right: 10px; background-color: white; display: grid; -grid-gap: 10px; +grid-gap: 60px; grid-template-columns: 1fr 1fr 1fr; - -padding-bottom: 10px; align-items: center; - +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; @media only screen and (max-width: 1041px) { - grid-template-columns: 1fr; - grid-template-rows: repeat(3, 1fr); - grid-gap: 10px; - justify-self: stretch; - } +grid-template-columns: 1fr; +grid-template-rows: repeat(3, 1fr); +grid-gap: 10px; +justify-self: stretch; +} ` // Fifth Container- BlockOne export const BlockOne = styled.div` -justify-self: stretch; -height: 200px; -background-color:#c7c4c4; +height: auto; +display: flex; +flex-direction:column; +background: linear-gradient(to bottom, white, #eceff1); + color: white; @media only screen and (max-width: 1041px) { +} +` +// Fifth Container- BlockOneContainerOne +export const BlockOneContainerOne = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockOneLabelOne +export const BlockOneLabelOne = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockOneLabelTwo +export const BlockOneLabelTwo = styled.label` +font-size: 25px; +color:black; +`// -End- Fifth Container- BlockOneContainerOne--> + - } +// Fifth Container- BlockOneContainerTwo +export const BlockOneContainerTwo = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockOneLabelThree +export const BlockOneLabelThree = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockOneLabelFour +export const BlockOneLabelFour = styled.label` +font-size: 25px; +color:black; +`// -End- Fifth Container- BlockOneContainerTwo--> + + +// Fifth Container- BlockOneContainerThree +export const BlockOneContainerThree = styled.div` + display: flex; + flex-direction:row; + justify-content: space-between; + margin-top: 10px; + margin-bottom:10px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 10px; +` +// Fifth Container- BlockOneLabelFive +export const BlockOneLabelFive = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockOneLabelSix +export const BlockOneLabelSix = styled.label` +font-size: 25px; +color:black; ` // Fourth Container- BlockOneMessage export const BlockOneMessage = styled.p` @@ -289,42 +375,186 @@ font-size: 20px; font-weight: bold; color:white; padding-left: 10px; -` +`// -End- Fifth Container- BlockOneContainerThree--> + + + + + + // Fifth Container- BlockTwo export const BlockTwo = styled.div` -justify-self: stretch; -height: 200px; -background-color:#969696; +display: flex; +flex-direction:column; +height: auto; +background: linear-gradient(to bottom, white, #eceff1 ); + color: white; @media only screen and (max-width: 1041px) { - } +} ` -// Fourth Container- BlockTwoMessage -export const BlockTwoMessage = styled.p` -font-size: 20px; -font-weight: bold; -color:white; -padding-left: 10px; +// Fifth Container- BlockTwoContainerOne +export const BlockTwoContainerOne = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` + +// Fifth Container- BlockTwoLabelOne +export const BlockTwoLabelOne = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockTwoLabelTwo +export const BlockTwoLabelTwo = styled.label` +font-size: 25px; +color:black; +` + + +// Fifth Container- BlockTwoContainerTwo +export const BlockTwoContainerTwo = styled.div` + display: flex; + flex-direction:row; + justify-content: space-between; + margin-top: 10px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 10px; + border-bottom-width: 2px; + border-bottom-style: solid; + border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockTwoLabelThree +export const BlockTwoLabelThree = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockTwoLabelFour +export const BlockTwoLabelFour = styled.label` +font-size: 25px; +color:black; ` +// Fifth Container- BlockTwoContainerThree +export const BlockTwoContainerThree = styled.div` + display: flex; + flex-direction:row; + justify-content: space-between; + margin-top: 10px; + margin-bottom:10px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 10px; + +` +// Fifth Container- BlockTwoLabelFive +export const BlockTwoLabelFive = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockTwoLabelSix +export const BlockTwoLabelSix = styled.label` +font-size: 25px; +color:black; +` + + // Fifth Container- BlockThree export const BlockThree = styled.div` -justify-self: stretch; -height: 200px; -background-color: #c7c4c4; +display: flex; +flex-direction:column; +height: auto; +background: linear-gradient(to bottom, white, #eceff1 ); + color: white; @media only screen and (max-width: 1041px) { - - - } + +} ` -// Fourth Container- BlockThreeMessage -export const BlockThreeMessage = styled.p` -font-size: 20px; -font-weight: bold; -color:white; -padding-left: 10px; +// Fifth Container- BlockThreeContainerOne +export const BlockThreeContainerOne = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockThreeContainerTwo +export const BlockThreeContainerTwo = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockThreeContainerThree +export const BlockThreeContainerThree = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +margin-bottom:10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; + ` +// Fifth Container- BlockThreeLabelOne +export const BlockThreeLabelOne = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockThreeLabelTwo +export const BlockThreeLabelTwo = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockThreeLabelThree +export const BlockThreeLabelThree = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockThreeLabelFour +export const BlockThreeLabelFour = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockThreeLabelFive +export const BlockThreeLabelFive = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockThreeLabelSix +export const BlockThreeLabelSix = styled.label` +font-size: 25px; +color:black; +` + + + // Sixth Container export const SixthContainer = styled.div` +margin-top: 10px; padding-left: 10px; padding-right: 10px; background-color: white; @@ -353,6 +583,7 @@ padding-left: 10px; // Sixth Container- SubText export const Subtext = styled.label` grid-area: label-Subtext; +margin-top: 10px; font-size: 20px; color:black; padding-left: 10px; From cb119682c30d74e8552fff18277ff4975304c81b Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Thu, 8 Jul 2021 10:39:54 -0700 Subject: [PATCH 09/15] Refactored YearGraphStyled --- src/components/YearGraph/YearGraphStyled.tsx | 240 ++++++++----------- 1 file changed, 106 insertions(+), 134 deletions(-) diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index e2e3b5d..834681e 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -1,7 +1,6 @@ // Written by Joey Essak- // Importorting styled-comonents import styled from "styled-components"; - // Wrapper that goes around the First and Second Container export const Wrapper = styled.div` background-color: rgb(255, 255, 255); @@ -9,17 +8,19 @@ padding-left:50px; padding-right: 50px; padding-bottom: 40px; margin-top: 50px; +margin-bottom: 50px; //height: 100vh; margin-left: 60px; margin-right: 60px; padding-top: 40px; -border-radius: 20px; +border-radius: 50px; border-color: #004d40; border-style: solid; border-width: 10px; filter: drop-shadow(0 0 0.75rem grey); ` + // First Container aka Main Container export const MainContainer = styled.div` padding-left: 10px; @@ -36,8 +37,8 @@ margin-right: 10px; font-size:54px; font-weight: 700; @media only screen and (max-width: 1041px) { - font-size:18px; - } +font-size:18px; +} ` // First Container- Label 2: export const LabelTwo = styled.label` @@ -46,8 +47,8 @@ margin-right: 10px; color: green; font-size:30px; @media only screen and (max-width: 1041px) { - font-size:18px; - } +font-size:18px; +} ` // First Container- Label 3: export const LabelThree = styled.label` @@ -57,11 +58,12 @@ font-weight: 700; color: green; margin-right: 10px; @media only screen and (max-width: 1041px) { - font-size:18px; - - } +font-size:18px; +} `// -End- First Container--> + + // Second Container export const SecondContainer = styled.div` padding-left: 10px; @@ -71,52 +73,49 @@ align-items: flex-end; ` // Second Container- Label 4: export const LabelFour = styled.label` - margin-right: 10px; color: grey; font-size:24px; font-weight: 700; align-items: center; @media only screen and (max-width: 1041px) { - display: none !important; - } +display: none !important; +} ` // Second Container- Label 5: export const LabelFive = styled.label` - margin-right: 10px; align-self: flex-end; font-size:30px; color: green; @media only screen and (max-width: 1041px) { - display: none !important; - } +display: none !important; +} ` // Second Container- Label 6: export const LabelSix = styled.label` - margin-right: 10px; font-size:24px; font-weight: 600; color: green; align-items:center; @media only screen and (max-width: 1041px) { - - display: none !important; - } +display: none !important; +} ` // Second Container- Label 7: export const LabelSeven = styled.label` - color: grey; font-size:24px; font-weight: 700; align-items:center; @media only screen and (max-width: 1041px) { - font-size:18px; - } +font-size:18px; +} `// -End- Second Container--> + + // Third Container export const ThirdContainer = styled.div` background-color: white; @@ -137,16 +136,15 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } -@media only screen and (max-width: 1041px) { + background-color: #6d6d6d; + color: white; +} +@media only screen and (max-width: 1041px){ display: none !important; - } +} ` // Third Container- Button 2: export const ButtonTwo = styled.button` - margin-right: 20px; width: 150px; border-radius: 30px; @@ -154,12 +152,12 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } -@media only screen and (max-width: 1041px) { + background-color: #6d6d6d; + color: white; +} +@media only screen and (max-width: 1041px){ display: none !important; - } +} ` // Third Container- Button 3: export const ButtonThree = styled.button` @@ -170,12 +168,12 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } + background-color: #6d6d6d; + color: white; +} @media only screen and (max-width: 1041px) { display: none !important; - } +} ` // Third Container- Button 4: export const ButtonFour = styled.button` @@ -186,12 +184,12 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } + background-color: #6d6d6d; + color: white; +} @media only screen and (max-width: 1041px) { display: none !important; - } +} ` // Third Container- Button 5: export const ButtonFive = styled.button` @@ -202,12 +200,12 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } + background-color: #6d6d6d; + color: white; +} @media only screen and (max-width: 1041px) { display: none !important; - } +} ` // Third Container- Button 6: export const ButtonSix = styled.button` @@ -217,14 +215,16 @@ color: #666565; font-size: 18px; font-weight: bold; &:hover { - background-color: #6d6d6d; - color: white; - } + background-color: #6d6d6d; + color: white; +} @media only screen and (max-width: 1041px) { display: none !important; - } +} `// -End- Third Container--> + + // Fourth Container export const FourthContainer = styled.div` padding-left: 10px; @@ -239,9 +239,8 @@ align-items: center; export const StockChartPlaceholder = styled.div` height: 400px; width: 100vw; - background: linear-gradient(to bottom, white, #004d40 ); - color: white; +color: white; display: flex; justify-content: center; align-items: center; @@ -256,16 +255,6 @@ padding-left: 10px; - - - - - - - - - - // Fifth Container export const FifthContainer = styled.div` padding-left: 10px; @@ -291,7 +280,7 @@ height: auto; display: flex; flex-direction:column; background: linear-gradient(to bottom, white, #eceff1); - color: white; +color: white; @media only screen and (max-width: 1041px) { } @@ -309,18 +298,6 @@ border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #c7c4c4; ` -// Fifth Container- BlockOneLabelOne -export const BlockOneLabelOne = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelTwo -export const BlockOneLabelTwo = styled.label` -font-size: 25px; -color:black; -`// -End- Fifth Container- BlockOneContainerOne--> - - // Fifth Container- BlockOneContainerTwo export const BlockOneContainerTwo = styled.div` display: flex; @@ -335,6 +312,28 @@ border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #c7c4c4; ` +// Fifth Container- BlockOneContainerThree +export const BlockOneContainerThree = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +margin-bottom:10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +` +// Fifth Container- BlockOneLabelOne +export const BlockOneLabelOne = styled.label` +font-size: 25px; +color:black; +` +// Fifth Container- BlockOneLabelTwo +export const BlockOneLabelTwo = styled.label` +font-size: 25px; +color:black; +` // Fifth Container- BlockOneLabelThree export const BlockOneLabelThree = styled.label` font-size: 25px; @@ -344,20 +343,6 @@ color:black; export const BlockOneLabelFour = styled.label` font-size: 25px; color:black; -`// -End- Fifth Container- BlockOneContainerTwo--> - - -// Fifth Container- BlockOneContainerThree -export const BlockOneContainerThree = styled.div` - display: flex; - flex-direction:row; - justify-content: space-between; - margin-top: 10px; - margin-bottom:10px; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 5px; - padding-right: 10px; ` // Fifth Container- BlockOneLabelFive export const BlockOneLabelFive = styled.label` @@ -375,20 +360,14 @@ font-size: 20px; font-weight: bold; color:white; padding-left: 10px; -`// -End- Fifth Container- BlockOneContainerThree--> - - - - - - +` // Fifth Container- BlockTwo export const BlockTwo = styled.div` display: flex; flex-direction:column; height: auto; background: linear-gradient(to bottom, white, #eceff1 ); - color: white; +color: white; @media only screen and (max-width: 1041px) { } @@ -406,7 +385,32 @@ border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #c7c4c4; ` - +// Fifth Container- BlockTwoContainerTwo +export const BlockTwoContainerTwo = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +border-bottom-width: 2px; +border-bottom-style: solid; +border-bottom-color: #c7c4c4; +` +// Fifth Container- BlockTwoContainerThree +export const BlockTwoContainerThree = styled.div` +display: flex; +flex-direction:row; +justify-content: space-between; +margin-top: 10px; +margin-bottom:10px; +padding-top: 10px; +padding-bottom: 10px; +padding-left: 5px; +padding-right: 10px; +` // Fifth Container- BlockTwoLabelOne export const BlockTwoLabelOne = styled.label` font-size: 25px; @@ -417,22 +421,6 @@ export const BlockTwoLabelTwo = styled.label` font-size: 25px; color:black; ` - - -// Fifth Container- BlockTwoContainerTwo -export const BlockTwoContainerTwo = styled.div` - display: flex; - flex-direction:row; - justify-content: space-between; - margin-top: 10px; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 5px; - padding-right: 10px; - border-bottom-width: 2px; - border-bottom-style: solid; - border-bottom-color: #c7c4c4; -` // Fifth Container- BlockTwoLabelThree export const BlockTwoLabelThree = styled.label` font-size: 25px; @@ -442,19 +430,6 @@ color:black; export const BlockTwoLabelFour = styled.label` font-size: 25px; color:black; -` -// Fifth Container- BlockTwoContainerThree -export const BlockTwoContainerThree = styled.div` - display: flex; - flex-direction:row; - justify-content: space-between; - margin-top: 10px; - margin-bottom:10px; - padding-top: 10px; - padding-bottom: 10px; - padding-left: 5px; - padding-right: 10px; - ` // Fifth Container- BlockTwoLabelFive export const BlockTwoLabelFive = styled.label` @@ -466,15 +441,13 @@ export const BlockTwoLabelSix = styled.label` font-size: 25px; color:black; ` - - // Fifth Container- BlockThree export const BlockThree = styled.div` display: flex; flex-direction:column; height: auto; background: linear-gradient(to bottom, white, #eceff1 ); - color: white; +color: white; @media only screen and (max-width: 1041px) { } @@ -517,7 +490,6 @@ padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 10px; - ` // Fifth Container- BlockThreeLabelOne export const BlockThreeLabelOne = styled.label` @@ -548,7 +520,7 @@ color:black; export const BlockThreeLabelSix = styled.label` font-size: 25px; color:black; -` +`// -End- Fifth Container--> @@ -612,7 +584,7 @@ width: 150px; height: 50px; color: grey; &:hover { - background-color: #6d6d6d; - color: white; - } + background-color: #6d6d6d; + color: white; +} ` \ No newline at end of file From 1fe5a03ca697e25c307c26b36325957b738223b1 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Thu, 8 Jul 2021 10:47:08 -0700 Subject: [PATCH 10/15] Refactored YearGraph.tsx --- src/components/YearGraph/YearGraph.tsx | 27 +++++++------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index a26d522..1235880 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -32,27 +32,24 @@ import { PlaceholderMessage } from "./YearGraphStyled"; import { FifthContainer } from "./YearGraphStyled"; import { BlockOne } from "./YearGraphStyled"; import { BlockOneContainerOne } from './YearGraphStyled'; +import { BlockOneContainerTwo } from './YearGraphStyled'; +import { BlockOneContainerThree } from './YearGraphStyled'; import { BlockOneLabelOne } from './YearGraphStyled'; import { BlockOneLabelTwo } from './YearGraphStyled'; -import { BlockOneContainerTwo } from './YearGraphStyled'; import { BlockOneLabelThree } from './YearGraphStyled'; import { BlockOneLabelFour } from './YearGraphStyled'; -import { BlockOneContainerThree } from './YearGraphStyled'; import { BlockOneLabelFive } from './YearGraphStyled'; import { BlockOneLabelSix } from './YearGraphStyled'; - import { BlockTwo } from "./YearGraphStyled"; import { BlockTwoContainerOne } from './YearGraphStyled'; +import { BlockTwoContainerTwo } from './YearGraphStyled'; +import { BlockTwoContainerThree } from './YearGraphStyled'; import { BlockTwoLabelOne } from './YearGraphStyled'; import { BlockTwoLabelTwo } from './YearGraphStyled'; -import { BlockTwoContainerTwo } from './YearGraphStyled'; import { BlockTwoLabelThree } from './YearGraphStyled'; import { BlockTwoLabelFour } from './YearGraphStyled'; -import { BlockTwoContainerThree } from './YearGraphStyled'; import { BlockTwoLabelFive } from './YearGraphStyled'; import { BlockTwoLabelSix } from './YearGraphStyled'; - - import { BlockThree } from "./YearGraphStyled"; import { BlockThreeContainerOne } from './YearGraphStyled'; import { BlockThreeContainerTwo } from './YearGraphStyled'; @@ -63,8 +60,6 @@ import { BlockThreeLabelThree } from './YearGraphStyled'; import { BlockThreeLabelFour } from './YearGraphStyled'; import { BlockThreeLabelFive } from './YearGraphStyled'; import { BlockThreeLabelSix } from './YearGraphStyled'; - - // SixthContainer Imported import { SixthContainer } from "./YearGraphStyled"; import { TitleText } from "./YearGraphStyled"; @@ -73,7 +68,6 @@ import { ButtonSeven } from "./YearGraphStyled"; import { StyledLink } from './YearGraphStyled'; import { StyledLinkTwo } from './YearGraphStyled'; - // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( @@ -91,7 +85,6 @@ const YearGraph = ( ): JSX.Element => { After Hours . June 29, 7:59PM EDT . Market Closed - Day Week @@ -100,8 +93,7 @@ const YearGraph = ( ): JSX.Element => { 5 Year Max - - + @@ -109,8 +101,8 @@ const YearGraph = ( ): JSX.Element => { + - Open @@ -125,9 +117,6 @@ const YearGraph = ( ): JSX.Element => { 17.99 - - - P/E @@ -142,9 +131,6 @@ const YearGraph = ( ): JSX.Element => { 5.63 - - - Vol @@ -160,6 +146,7 @@ const YearGraph = ( ): JSX.Element => { + Track this stock Get the latest quotes in your watchlist and receive email and browser notifications From 049977ab02c38422c8dd5432a270b8a10bcf70fd Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Wed, 14 Jul 2021 11:44:43 -0700 Subject: [PATCH 11/15] Starting over changed the approach --- src/components/YearGraph/YearGraph.styles.css | 30 + src/components/YearGraph/YearGraph.tsx | 183 ++---- src/components/YearGraph/YearGraphStyled.tsx | 589 +----------------- 3 files changed, 72 insertions(+), 730 deletions(-) create mode 100644 src/components/YearGraph/YearGraph.styles.css diff --git a/src/components/YearGraph/YearGraph.styles.css b/src/components/YearGraph/YearGraph.styles.css new file mode 100644 index 0000000..dc0661b --- /dev/null +++ b/src/components/YearGraph/YearGraph.styles.css @@ -0,0 +1,30 @@ +.wrapper { + display: flex; + min-height: 100vh; + flex-direction: column; + background-color:white; +} + +.container-1 { + background-color: #e0f2f1; +} + +.container-2 { + background-color: #b2dfdb; +} + +.container-3 { + background-color: #80cbc4; +} + +.container-4 { + background-color: #4db6ac; +} + +.container-5 { + background-color: #26a69a; +} + +.container-6 { + background-color: #009688; +} \ No newline at end of file diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 1235880..426f449 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -1,158 +1,49 @@ // Written by Joey Essak- +// Imported CSS +import "./YearGraph.styles.css"; // Imported Font Awesome Icons import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCaretUp } from '@fortawesome/free-solid-svg-icons' import { faStar } from '@fortawesome/free-regular-svg-icons' -// Imported Wrapper -import { Wrapper } from "./YearGraphStyled"; -// FirstContainer Imported -import { MainContainer } from "./YearGraphStyled"; -import { LabelOne } from "./YearGraphStyled"; -import { LabelTwo } from "./YearGraphStyled"; -import { LabelThree } from "./YearGraphStyled"; -// SecondContainer Imported -import { SecondContainer } from "./YearGraphStyled"; -import { LabelFour } from "./YearGraphStyled"; -import { LabelFive } from "./YearGraphStyled"; -import { LabelSix } from "./YearGraphStyled"; -import { LabelSeven } from "./YearGraphStyled"; -// ThirdContainer Imported -import { ThirdContainer } from "./YearGraphStyled"; -import { ButtonOne } from "./YearGraphStyled"; -import { ButtonTwo } from "./YearGraphStyled"; -import { ButtonThree } from "./YearGraphStyled"; -import { ButtonFour } from "./YearGraphStyled"; -import { ButtonFive } from "./YearGraphStyled"; -import { ButtonSix } from "./YearGraphStyled"; -// FourthContainer Imported -import { FourthContainer } from "./YearGraphStyled"; -import { StockChartPlaceholder } from "./YearGraphStyled"; -import { PlaceholderMessage } from "./YearGraphStyled"; -// FifthContainer Imported -import { FifthContainer } from "./YearGraphStyled"; -import { BlockOne } from "./YearGraphStyled"; -import { BlockOneContainerOne } from './YearGraphStyled'; -import { BlockOneContainerTwo } from './YearGraphStyled'; -import { BlockOneContainerThree } from './YearGraphStyled'; -import { BlockOneLabelOne } from './YearGraphStyled'; -import { BlockOneLabelTwo } from './YearGraphStyled'; -import { BlockOneLabelThree } from './YearGraphStyled'; -import { BlockOneLabelFour } from './YearGraphStyled'; -import { BlockOneLabelFive } from './YearGraphStyled'; -import { BlockOneLabelSix } from './YearGraphStyled'; -import { BlockTwo } from "./YearGraphStyled"; -import { BlockTwoContainerOne } from './YearGraphStyled'; -import { BlockTwoContainerTwo } from './YearGraphStyled'; -import { BlockTwoContainerThree } from './YearGraphStyled'; -import { BlockTwoLabelOne } from './YearGraphStyled'; -import { BlockTwoLabelTwo } from './YearGraphStyled'; -import { BlockTwoLabelThree } from './YearGraphStyled'; -import { BlockTwoLabelFour } from './YearGraphStyled'; -import { BlockTwoLabelFive } from './YearGraphStyled'; -import { BlockTwoLabelSix } from './YearGraphStyled'; -import { BlockThree } from "./YearGraphStyled"; -import { BlockThreeContainerOne } from './YearGraphStyled'; -import { BlockThreeContainerTwo } from './YearGraphStyled'; -import { BlockThreeContainerThree } from './YearGraphStyled'; -import { BlockThreeLabelOne } from './YearGraphStyled'; -import { BlockThreeLabelTwo } from './YearGraphStyled'; -import { BlockThreeLabelThree } from './YearGraphStyled'; -import { BlockThreeLabelFour } from './YearGraphStyled'; -import { BlockThreeLabelFive } from './YearGraphStyled'; -import { BlockThreeLabelSix } from './YearGraphStyled'; -// SixthContainer Imported -import { SixthContainer } from "./YearGraphStyled"; -import { TitleText } from "./YearGraphStyled"; -import { Subtext } from "./YearGraphStyled"; -import { ButtonSeven } from "./YearGraphStyled"; -import { StyledLink } from './YearGraphStyled'; -import { StyledLinkTwo } from './YearGraphStyled'; + + // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { return ( - - - 19.00 - - 0.10(0.53%) - - - - 19.33 - - 0.33(1.74%) - After Hours . June 29, 7:59PM EDT . Market Closed - - - - Day - Week - Month - Year - 5 Year - Max - - - - - - I am a really cool 3d stock chart and this is my temporary placeholder I update in realtime and show you the Money! - - - - - - - - Open - 18.08 - - - High - 19.97 - - - Low - 17.99 - - - - - P/E - - - - - 52wk High - 23.99 - - - 52wk Low - 5.63 - - - - - Vol - 14.04 M - - - Avg Vol - 2.49 M - - - Mkt Cap - 2.79 B - - - - - - Track this stock - Get the latest quotes in your watchlist and receive email and browser notifications - Follow - - +
+
+ Container 1 + + + + +
+
+ Container 2 +
+
+ Container 3 +
+
+ Container 4 +
+
+ Container5 +
+ Column One +
+
+ Column Two +
+
+ Column Three +
+
+
+ Conatiner 6 +
+
); }; // Exporting the created YearGraph JSX Element diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index 834681e..cc83a02 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -1,590 +1,11 @@ // Written by Joey Essak- // Importorting styled-comonents import styled from "styled-components"; -// Wrapper that goes around the First and Second Container -export const Wrapper = styled.div` -background-color: rgb(255, 255, 255); -padding-left:50px; -padding-right: 50px; -padding-bottom: 40px; -margin-top: 50px; -margin-bottom: 50px; -//height: 100vh; -margin-left: 60px; -margin-right: 60px; -padding-top: 40px; -border-radius: 50px; -border-color: #004d40; -border-style: solid; -border-width: 10px; -filter: drop-shadow(0 0 0.75rem grey); -` - - -// First Container aka Main Container -export const MainContainer = styled.div` -padding-left: 10px; -padding-top: 10px; -padding-bottom: 10px; -background-color: white; -display: flex; -align-items: flex-end; -` -// First Container- Label 1: -export const LabelOne = styled.label` - -margin-right: 10px; -font-size:54px; -font-weight: 700; -@media only screen and (max-width: 1041px) { -font-size:18px; -} -` -// First Container- Label 2: -export const LabelTwo = styled.label` - -margin-right: 10px; -color: green; -font-size:30px; -@media only screen and (max-width: 1041px) { -font-size:18px; -} -` -// First Container- Label 3: -export const LabelThree = styled.label` - -font-size:24px; -font-weight: 700; -color: green; -margin-right: 10px; -@media only screen and (max-width: 1041px) { -font-size:18px; -} -`// -End- First Container--> - - - -// Second Container -export const SecondContainer = styled.div` -padding-left: 10px; -background-color: white; -display: flex; -align-items: flex-end; -` -// Second Container- Label 4: -export const LabelFour = styled.label` -margin-right: 10px; -color: grey; -font-size:24px; -font-weight: 700; -align-items: center; -@media only screen and (max-width: 1041px) { -display: none !important; -} -` -// Second Container- Label 5: -export const LabelFive = styled.label` -margin-right: 10px; -align-self: flex-end; -font-size:30px; -color: green; -@media only screen and (max-width: 1041px) { -display: none !important; -} -` -// Second Container- Label 6: -export const LabelSix = styled.label` -margin-right: 10px; -font-size:24px; -font-weight: 600; -color: green; -align-items:center; -@media only screen and (max-width: 1041px) { -display: none !important; -} -` -// Second Container- Label 7: -export const LabelSeven = styled.label` -color: grey; -font-size:24px; -font-weight: 700; -align-items:center; -@media only screen and (max-width: 1041px) { -font-size:18px; -} -`// -End- Second Container--> - - - -// Third Container -export const ThirdContainer = styled.div` -background-color: white; -display: flex; -flex-direction: row; -margin-top: 10px; -padding-top: 10px; -padding-left: 10px; -padding-bottom: 10px; -` -// Third Container- Button 1: -export const ButtonOne = styled.button` -width: 150px; -height: 50px; -margin-right: 20px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px){ - display: none !important; -} -` -// Third Container- Button 2: -export const ButtonTwo = styled.button` -margin-right: 20px; -width: 150px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px){ - display: none !important; -} -` -// Third Container- Button 3: -export const ButtonThree = styled.button` -margin-right: 20px; -width: 150px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px) { - display: none !important; -} -` -// Third Container- Button 4: -export const ButtonFour = styled.button` -margin-right: 20px; -width: 150px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px) { - display: none !important; -} -` -// Third Container- Button 5: -export const ButtonFive = styled.button` -margin-right: 20px; -width: 150px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px) { - display: none !important; -} -` -// Third Container- Button 6: -export const ButtonSix = styled.button` -width: 150px; -border-radius: 30px; -color: #666565; -font-size: 18px; -font-weight: bold; -&:hover { - background-color: #6d6d6d; - color: white; -} -@media only screen and (max-width: 1041px) { - display: none !important; -} -`// -End- Third Container--> - - - -// Fourth Container -export const FourthContainer = styled.div` -padding-left: 10px; -padding-right: 10px; -background-color: white; -display: flex; -flex-direction: row; -padding-bottom: 10px; -align-items: center; -` -// Fourth Container- StockChartPlaceholder -export const StockChartPlaceholder = styled.div` -height: 400px; -width: 100vw; -background: linear-gradient(to bottom, white, #004d40 ); -color: white; -display: flex; -justify-content: center; -align-items: center; -` -// Fourth Container- PlaceholderMessage -export const PlaceholderMessage = styled.p` -font-size: 20px; -font-weight: bold; -color:white; -padding-left: 10px; -`// -End- Fourth Container--> - - - -// Fifth Container -export const FifthContainer = styled.div` -padding-left: 10px; -padding-right: 10px; -background-color: white; -display: grid; -grid-gap: 60px; -grid-template-columns: 1fr 1fr 1fr; -align-items: center; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -@media only screen and (max-width: 1041px) { -grid-template-columns: 1fr; -grid-template-rows: repeat(3, 1fr); -grid-gap: 10px; -justify-self: stretch; -} -` -// Fifth Container- BlockOne -export const BlockOne = styled.div` -height: auto; -display: flex; -flex-direction:column; -background: linear-gradient(to bottom, white, #eceff1); -color: white; -@media only screen and (max-width: 1041px) { - -} -` -// Fifth Container- BlockOneContainerOne -export const BlockOneContainerOne = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockOneContainerTwo -export const BlockOneContainerTwo = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockOneContainerThree -export const BlockOneContainerThree = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -margin-bottom:10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -` -// Fifth Container- BlockOneLabelOne -export const BlockOneLabelOne = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelTwo -export const BlockOneLabelTwo = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelThree -export const BlockOneLabelThree = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelFour -export const BlockOneLabelFour = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelFive -export const BlockOneLabelFive = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockOneLabelSix -export const BlockOneLabelSix = styled.label` -font-size: 25px; -color:black; -` -// Fourth Container- BlockOneMessage -export const BlockOneMessage = styled.p` -font-size: 20px; -font-weight: bold; -color:white; -padding-left: 10px; -` -// Fifth Container- BlockTwo -export const BlockTwo = styled.div` -display: flex; -flex-direction:column; -height: auto; -background: linear-gradient(to bottom, white, #eceff1 ); -color: white; -@media only screen and (max-width: 1041px) { - -} -` -// Fifth Container- BlockTwoContainerOne -export const BlockTwoContainerOne = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockTwoContainerTwo -export const BlockTwoContainerTwo = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockTwoContainerThree -export const BlockTwoContainerThree = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -margin-bottom:10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -` -// Fifth Container- BlockTwoLabelOne -export const BlockTwoLabelOne = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockTwoLabelTwo -export const BlockTwoLabelTwo = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockTwoLabelThree -export const BlockTwoLabelThree = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockTwoLabelFour -export const BlockTwoLabelFour = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockTwoLabelFive -export const BlockTwoLabelFive = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockTwoLabelSix -export const BlockTwoLabelSix = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThree -export const BlockThree = styled.div` -display: flex; -flex-direction:column; -height: auto; -background: linear-gradient(to bottom, white, #eceff1 ); -color: white; -@media only screen and (max-width: 1041px) { - -} -` -// Fifth Container- BlockThreeContainerOne -export const BlockThreeContainerOne = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockThreeContainerTwo -export const BlockThreeContainerTwo = styled.div` +// Ultimate Wrapper this goes around the whole enchilada +export const UltimateWrapper = styled.div` display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -border-bottom-width: 2px; -border-bottom-style: solid; -border-bottom-color: #c7c4c4; -` -// Fifth Container- BlockThreeContainerThree -export const BlockThreeContainerThree = styled.div` -display: flex; -flex-direction:row; -justify-content: space-between; -margin-top: 10px; -margin-bottom:10px; -padding-top: 10px; -padding-bottom: 10px; -padding-left: 5px; -padding-right: 10px; -` -// Fifth Container- BlockThreeLabelOne -export const BlockThreeLabelOne = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThreeLabelTwo -export const BlockThreeLabelTwo = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThreeLabelThree -export const BlockThreeLabelThree = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThreeLabelFour -export const BlockThreeLabelFour = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThreeLabelFive -export const BlockThreeLabelFive = styled.label` -font-size: 25px; -color:black; -` -// Fifth Container- BlockThreeLabelSix -export const BlockThreeLabelSix = styled.label` -font-size: 25px; -color:black; -`// -End- Fifth Container--> - - - -// Sixth Container -export const SixthContainer = styled.div` -margin-top: 10px; -padding-left: 10px; -padding-right: 10px; -background-color: white; -display: grid; -grid-template-columns: 1fr 1fr 1fr; -grid-template-rows: auto; -// Defining: grid template- for objects -grid-template-areas: - "label-Title label-Title button" - "label-Subtext label-Subtext button"; -// -End- grid template--> -padding-top: 10px; -padding-bottom: 10px; -align-items: center; -/* border-style: solid; -border-color: #1900ff; */ -` -// Sixth Container- TitleText -export const TitleText = styled.label` -grid-area: label-Title; -font-size: 25px; -font-weight: bold; -color:black; -padding-left: 10px; -` -// Sixth Container- SubText -export const Subtext = styled.label` -grid-area: label-Subtext; -margin-top: 10px; -font-size: 20px; -color:black; -padding-left: 10px; -` -// Sixth Container- StyledLink -export const StyledLink = styled.a` -text-decoration: none; -font-weight: bold; -` -// Sixth Container- StyledLinkTwo -export const StyledLinkTwo = styled.a` -text-decoration: none; -color: #0aa9e2; -font-weight: bold; +min-height: 100vh; +flex-direction: column; +background-color:#eceff1; ` -// Sixth Container- Button 7: -export const ButtonSeven = styled.button` -grid-area:button; -justify-self: end; -justify-content: space-between; -font-size: 18px; -font-weight: bold; -margin-right: 20px; -width: 150px; -height: 50px; -color: grey; -&:hover { - background-color: #6d6d6d; - color: white; -} -` \ No newline at end of file From 0c603d08df405fda43306743e3a6c559ad5d12fd Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Wed, 14 Jul 2021 13:07:07 -0700 Subject: [PATCH 12/15] Establishing Layout and containers for elements --- src/components/YearGraph/YearGraph.styles.css | 25 +++++++++++++++++++ src/components/YearGraph/YearGraph.tsx | 12 ++++----- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/components/YearGraph/YearGraph.styles.css b/src/components/YearGraph/YearGraph.styles.css index dc0661b..3da8757 100644 --- a/src/components/YearGraph/YearGraph.styles.css +++ b/src/components/YearGraph/YearGraph.styles.css @@ -23,6 +23,31 @@ .container-5 { background-color: #26a69a; + display: flex; +} + +.column-1 { + order:1; + width: 33.33%; + background-color: #a7ffeb; + text-align: center; + align-self: center; +} + +.column-2 { + order:2; + width: 33.33%; + background-color: #64ffda; + text-align: center; + align-self: center; +} + +.column-3 { + order:3; + width: 33.33%; + background-color: #1de9b6; + text-align: center; + align-self: center; } .container-6 { diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 426f449..86904a1 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -13,23 +13,21 @@ const YearGraph = ( ): JSX.Element => { return (
- Container 1 - +
- Container 2 + Buttons go here
- Container 3 + Labels go here
- Container 4 + 3D Chart goes here
- Container5
Column One
@@ -41,7 +39,7 @@ const YearGraph = ( ): JSX.Element => {
- Conatiner 6 + labels and a button go here
); From b4b600f1ea3549824e926f419c79cb52be53295f Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Fri, 16 Jul 2021 16:32:05 -0700 Subject: [PATCH 13/15] Added custom props to styledComponents --- src/components/YearGraph/YearGraph.styles.css | 20 +++++++++++ src/components/YearGraph/YearGraph.tsx | 33 +++++++++++++++---- src/components/YearGraph/YearGraphStyled.tsx | 22 ++++++++++++- 3 files changed, 67 insertions(+), 8 deletions(-) diff --git a/src/components/YearGraph/YearGraph.styles.css b/src/components/YearGraph/YearGraph.styles.css index 3da8757..1dcfaa2 100644 --- a/src/components/YearGraph/YearGraph.styles.css +++ b/src/components/YearGraph/YearGraph.styles.css @@ -7,6 +7,8 @@ .container-1 { background-color: #e0f2f1; + display: flex; + flex-direction: row; } .container-2 { @@ -32,6 +34,8 @@ background-color: #a7ffeb; text-align: center; align-self: center; + display: flex; + flex-direction: column; } .column-2 { @@ -40,6 +44,8 @@ background-color: #64ffda; text-align: center; align-self: center; + display: flex; + flex-direction: column; } .column-3 { @@ -48,8 +54,22 @@ background-color: #1de9b6; text-align: center; align-self: center; + display: flex; + flex-direction: column; } .container-6 { background-color: #009688; +} + +#icon { + order: 2; +} + +.test { + color:red; +} + +.test2{ + color: blue; } \ No newline at end of file diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 86904a1..7c993f0 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -5,21 +5,37 @@ import "./YearGraph.styles.css"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCaretUp } from '@fortawesome/free-solid-svg-icons' import { faStar } from '@fortawesome/free-regular-svg-icons' - +import { Label } from "./YearGraphStyled"; // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { + + const containerOneLabels = [ + {id:1, value: " 19.00", myLabel:"test"}, + {id:2, value: , myLabel:"test2"}, + {id:3, value: " 0.10", myLabel:"test3" }, + {id:3, value: " (00.53%)", myLabel:"test4" }, + ]; + + return (
-
- - - - +
; + { containerOneLabels.map((containerOneLabels)=> ( + + ))} + + + +
+ + + +
- Buttons go here + Buttons go here and will be Dynamically Loaded by react
Labels go here @@ -30,12 +46,15 @@ const YearGraph = ( ): JSX.Element => {
Column One +
Column Two +
Column Three +
diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index cc83a02..f25ed18 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -1,6 +1,6 @@ // Written by Joey Essak- // Importorting styled-comonents -import styled from "styled-components"; +import styled, {css} from "styled-components"; // Ultimate Wrapper this goes around the whole enchilada export const UltimateWrapper = styled.div` display: flex; @@ -9,3 +9,23 @@ flex-direction: column; background-color:#eceff1; ` + + + +export const Label = styled.label<{ myLabel: string }>` + +color: green; + + +${props => props.myLabel == "test" && css `background: palevioletred; + color: red;` + } + + +${props => props.myLabel == "test2" && css `background: palevioletred; + color: blue;` + } + + +font-size: 40px; +` \ No newline at end of file From 0ee5504bb4f27abd5a7f6733ab4f120c568ac1e9 Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Sat, 17 Jul 2021 12:16:11 -0700 Subject: [PATCH 14/15] Mapped container one labels --- src/components/YearGraph/YearGraph.tsx | 22 +++++--------- src/components/YearGraph/YearGraphStyled.tsx | 30 ++++++++++++++++---- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 7c993f0..75fb6db 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -12,28 +12,20 @@ import { Label } from "./YearGraphStyled"; const YearGraph = ( ): JSX.Element => { const containerOneLabels = [ - {id:1, value: " 19.00", myLabel:"test"}, - {id:2, value: , myLabel:"test2"}, - {id:3, value: " 0.10", myLabel:"test3" }, - {id:3, value: " (00.53%)", myLabel:"test4" }, + {id:1, value: " 19.00", labelName:"currentPriceLabel"}, + {id:2, value: , labelName:"faIconLabel"}, + {id:3, value: " 0.10", labelName:"priceDiffernceLabel" }, + {id:4, value: " (00.53%)", labelName:"priceDifferncePercentLabel"}, ]; return (
; - { containerOneLabels.map((containerOneLabels)=> ( - - ))} - - - - + { containerOneLabels.map((containerOneLabels)=>( + )) + }
- - - -
Buttons go here and will be Dynamically Loaded by react
diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index f25ed18..a6cc39a 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -12,20 +12,40 @@ background-color:#eceff1; -export const Label = styled.label<{ myLabel: string }>` +export const Label = styled.label <{ labelName: string }>` color: green; -${props => props.myLabel == "test" && css `background: palevioletred; - color: red;` +${props => props.labelName == "currentPriceLabel" && css` + color: #fbb800; + + ` } -${props => props.myLabel == "test2" && css `background: palevioletred; - color: blue;` +${props => props.labelName == "faIconLabel" && css` + color: #2121a4; + + ` } +${props => props.labelName == "priceDiffernceLabel" && css` + color: red; + + ` +} + + +${props => props.labelName == "priceDifferncePercentLabel" && css` + color: aquamarine; + + ` +} + + + + font-size: 40px; ` \ No newline at end of file From 7a00c515ee803ec43a67589b8951b53606e0ebda Mon Sep 17 00:00:00 2001 From: Joey <35553162+javascriptjoey@users.noreply.github.com> Date: Sat, 17 Jul 2021 16:56:01 -0700 Subject: [PATCH 15/15] Added container three buttons --- src/components/YearGraph/YearGraph.styles.css | 17 +++- src/components/YearGraph/YearGraph.tsx | 29 +++++-- src/components/YearGraph/YearGraphStyled.tsx | 79 ++++++++++--------- 3 files changed, 79 insertions(+), 46 deletions(-) diff --git a/src/components/YearGraph/YearGraph.styles.css b/src/components/YearGraph/YearGraph.styles.css index 1dcfaa2..92c6a7f 100644 --- a/src/components/YearGraph/YearGraph.styles.css +++ b/src/components/YearGraph/YearGraph.styles.css @@ -1,18 +1,31 @@ .wrapper { + margin-top: 25px; + margin-left: 15px; + margin-right: 15px; + margin-bottom: 25px; display: flex; - min-height: 100vh; flex-direction: column; background-color:white; + border-style: solid; + border-radius: 20px; + border-color: #009688; + border-width: 10px; } .container-1 { - background-color: #e0f2f1; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + background-color: white; display: flex; flex-direction: row; + align-items: flex-end; } .container-2 { background-color: #b2dfdb; + display: flex-box; + flex-direction: row; + align-items: center; } .container-3 { diff --git a/src/components/YearGraph/YearGraph.tsx b/src/components/YearGraph/YearGraph.tsx index 75fb6db..a5b706c 100644 --- a/src/components/YearGraph/YearGraph.tsx +++ b/src/components/YearGraph/YearGraph.tsx @@ -6,31 +6,48 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCaretUp } from '@fortawesome/free-solid-svg-icons' import { faStar } from '@fortawesome/free-regular-svg-icons' import { Label } from "./YearGraphStyled"; +import { Button } from "./YearGraphStyled"; // Creating a YearGraph JSX Element const YearGraph = ( ): JSX.Element => { - +// Container 1 const containerOneLabels = [ - {id:1, value: " 19.00", labelName:"currentPriceLabel"}, + {id:1, value: "19.00", labelName:"currentPriceLabel"}, {id:2, value: , labelName:"faIconLabel"}, {id:3, value: " 0.10", labelName:"priceDiffernceLabel" }, {id:4, value: " (00.53%)", labelName:"priceDifferncePercentLabel"}, ]; - + +// Container 2 + + +// Container 3 +const containerThreeButtons = [ + {id:5, title: "Day"}, + {id:6, title: "Week"}, + {id:7, title: "Month"}, + {id:8, title: "Year"}, + {id:9, title: "5 Year"}, + {id:10,title: "Max"}, +]; return (
-
; +
{ containerOneLabels.map((containerOneLabels)=>( )) }
+
- Buttons go here and will be Dynamically Loaded by react + Some more Labels go here
+
- Labels go here + { containerThreeButtons.map((containerThreeButtons)=>( + )) + }
3D Chart goes here diff --git a/src/components/YearGraph/YearGraphStyled.tsx b/src/components/YearGraph/YearGraphStyled.tsx index a6cc39a..7184d36 100644 --- a/src/components/YearGraph/YearGraphStyled.tsx +++ b/src/components/YearGraph/YearGraphStyled.tsx @@ -8,44 +8,47 @@ min-height: 100vh; flex-direction: column; background-color:#eceff1; ` - - - - -export const Label = styled.label <{ labelName: string }>` - -color: green; - - -${props => props.labelName == "currentPriceLabel" && css` - color: #fbb800; - - ` - } - - -${props => props.labelName == "faIconLabel" && css` - color: #2121a4; - - ` - } - - -${props => props.labelName == "priceDiffernceLabel" && css` - color: red; - - ` -} - - -${props => props.labelName == "priceDifferncePercentLabel" && css` - color: aquamarine; - - ` +export const Button = styled.button` +width: 90px; +height: 30px; +border-radius: 25px; +margin-right: 20px; +color: #636363; +&:hover { + background: #009688; + color: white; + cursor: pointer; } +` - - - -font-size: 40px; +export const Label = styled.label <{ labelName: string }>` + display: flex; + font-size: 20px; + color: grey; + padding-right:4px; + ${props => props.labelName == "currentPriceLabel" && css` + color: black; + font-size: 2em; + padding-left:10px; + ` + } + + ${props => props.labelName == "faIconLabel" && css` + align-items: flex-end; + color: green; + font-size: 20px; + ` + } + + ${props => props.labelName == "priceDiffernceLabel" && css` + color: green; + font-size: 15px; + ` + } + + ${props => props.labelName == "priceDifferncePercentLabel" && css` + color: green; + font-size: 15px; + ` + } ` \ No newline at end of file