Add color property to Typography and update use instances

LauraAubin · Nov 29, 2019 · c753360 · c753360
1 parent fde5e67
commit c753360
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 17 deletions.
diff --git a/src/components/pageElements/CharacterFrame/CharacterFrame.scss b/src/components/pageElements/CharacterFrame/CharacterFrame.scss
@@ -38,7 +38,6 @@ $gravatarSize: 60px;
   top: 22px;
   left: 130px;
 
-  color: color(yellow);
   font-size: 13px;
 }
 

diff --git a/src/components/pageElements/Minimap/Minimap.scss b/src/components/pageElements/Minimap/Minimap.scss
@@ -36,6 +36,5 @@
   right: 40px;
 
   font-size: 11px;
-  color: color(green);
   text-shadow: 1px 1px 0 color(ink);
 }
diff --git a/src/components/pageElements/Minimap/Minimap.tsx b/src/components/pageElements/Minimap/Minimap.tsx
@@ -8,7 +8,7 @@ export default function Minimap() {
   return (
     <div className='minimapContainer' id='mainElement'>
       <div className='frame'>
-        <Typography type='content' styles='location'>
+        <Typography type='content' color='green' styles='location'>
           Shopify - 150 Elgin
         </Typography>
         <div className='mapArea' />

diff --git a/src/components/pageElements/Modal/GM/CreateQuest/CreateQuest.scss b/src/components/pageElements/Modal/GM/CreateQuest/CreateQuest.scss
@@ -42,6 +42,5 @@
 }
 
 .testText {
-  color: color(yellow);
   font-size: 14px;
 }
diff --git a/src/components/pageElements/Modal/GM/CreateQuest/CreateQuest.tsx b/src/components/pageElements/Modal/GM/CreateQuest/CreateQuest.tsx
@@ -30,7 +30,7 @@ export default function CreateQuest() {
     ipcRenderer.once('testEnvironmentReply', (event, args) => {
       setTest(args);
     });
-  }, [])
+  }, []);
 
   const submit = () => {
     ipcRenderer.send('writeTo', {
@@ -51,18 +51,18 @@ export default function CreateQuest() {
 
   const contentMarkup = (
     <>
-      <Typography type='heading'>
+      <Typography type='heading' color='black'>
         <TextInput
-          placeholder='Title'
+          placeholder='Title...'
           maxLength={50}
           handleChange={setTitle}
           className='questContentHeaderText textHoverGlow'
         />
       </Typography>
 
-      <Typography type='content'>
+      <Typography type='content' color='black'>
         <TextInput
-          placeholder='Description'
+          placeholder='Description...'
           maxLength={300}
           handleChange={setDescription}
           className='questContentDescriptionText textHoverGlow'
@@ -71,16 +71,16 @@ export default function CreateQuest() {
 
       {headerText('Quest Objectives')}
 
-      <Typography type='content'>
+      <Typography type='content' color='black'>
         <TextInput
-          placeholder='Objectives'
+          placeholder='Objectives...'
           maxLength={200}
           handleChange={setQuestObjectives}
           className='questContentDescriptionText textHoverGlow'
         />
       </Typography>
 
-      <Typography type='content'>
+      <Typography type='content' color='black'>
         <div className='questDueDateText oneLine'>
           Due on&nbsp;
           <DateInput

diff --git a/src/components/pageElements/Modal/Quest/Quest.tsx b/src/components/pageElements/Modal/Quest/Quest.tsx
@@ -59,7 +59,7 @@ export default function Quest({ quest }: Props) {
 
 export function headerText(text) {
   return (
-    <Typography type='heading' styles='questContentHeaderText'>
+    <Typography type='heading' color='black' styles='questContentHeaderText'>
       {text}
     </Typography>
   );

diff --git a/src/components/pageElements/QuestList/components/Quest/Quest.scss b/src/components/pageElements/QuestList/components/Quest/Quest.scss
@@ -50,6 +50,5 @@ $fontSize: 13px;
 
 .objective {
   font-size: $fontSize;
-  color: white;
   text-shadow: 1px 1px 0 color(ink, light);
 }
diff --git a/src/components/pageElements/QuestList/components/Quest/Quest.tsx b/src/components/pageElements/QuestList/components/Quest/Quest.tsx
@@ -33,7 +33,7 @@ export default function Quest({ record }: Props) {
           {record.title}
         </Typography>
 
-        <Typography type='content' styles='objective'>
+        <Typography type='content' color='white' styles='objective'>
           {`- ${record.questObjectives}`}
         </Typography>
       </div>

diff --git a/src/components/pageElements/QuestList/components/QuestSection/QuestSection.scss b/src/components/pageElements/QuestList/components/QuestSection/QuestSection.scss
@@ -25,7 +25,6 @@ $questTitleFontSize: 15px;
 
   font-size: $questTitleFontSize;
   font-weight: 500;
-  color: color(yellow);
   text-shadow: 1px 0 0 color(ink, light);
   cursor: default;
 }
diff --git a/src/components/universalElements/Typography/Typography.scss b/src/components/universalElements/Typography/Typography.scss
@@ -1,3 +1,5 @@
+@import '../../../utilities/colors.scss';
+
 .heading {
   font-family: 'Morpheus';
   font-weight: 500;
@@ -6,3 +8,19 @@
 .content {
   font-family: 'Friz Quadrata';
 }
+
+.yellow {
+  color: color(yellow);
+}
+
+.green {
+  color: color(green);
+}
+
+.white {
+  color: white;
+}
+
+.black {
+  color: black;
+}
diff --git a/src/components/universalElements/Typography/Typography.tsx b/src/components/universalElements/Typography/Typography.tsx
@@ -6,12 +6,19 @@ import './Typography.scss';
 
 interface Props {
   type: 'heading' | 'content';
+  color?: 'yellow' | 'green' | 'white' | 'black';
   styles?: string;
   children: string | React.ReactNode;
 }
 
-export default function Typography({ type, styles, children }: Props) {
+export default function Typography({
+  type,
+  color = 'yellow',
+  styles,
+  children
+}: Props) {
   const textStyles = classNames(
+    color,
     styles,
     type === 'heading' && 'heading',
     type === 'content' && 'content'