Browse Source

Tried to add some color to app

eliam.ruiz 2 years ago
parent
commit
99c478b2ad
4 changed files with 42 additions and 3 deletions
  1. 2
    2
      src/components/ListComponent.css
  2. 3
    0
      src/pages/Home.tsx
  3. 6
    1
      src/theme/global.css
  4. 31
    0
      src/theme/variables.css

+ 2
- 2
src/components/ListComponent.css View File

8
   width: 100%;
8
   width: 100%;
9
 }
9
 }
10
 
10
 
11
-ion-list-header {
12
-  /* color: "primary"; */
11
+ion-list {
12
+  background-color: aqua;
13
 }
13
 }

+ 3
- 0
src/pages/Home.tsx View File

1
 import {
1
 import {
2
   IonContent,
2
   IonContent,
3
   IonHeader,
3
   IonHeader,
4
+  IonIcon,
4
   IonPage,
5
   IonPage,
5
   IonTitle,
6
   IonTitle,
6
   IonToolbar,
7
   IonToolbar,
7
 } from "@ionic/react";
8
 } from "@ionic/react";
8
 
9
 
10
+
11
+
9
 const Home: React.FC = () => {
12
 const Home: React.FC = () => {
10
   return (
13
   return (
11
     <IonPage>
14
     <IonPage>

+ 6
- 1
src/theme/global.css View File

2
 .notion-title,
2
 .notion-title,
3
 .notion-header {
3
 .notion-header {
4
   display: none !important;
4
   display: none !important;
5
+  background-color: #d6f8df;
5
 }
6
 }
6
 
7
 
7
 .notion-page {
8
 .notion-page {
8
   width: 100% !important;
9
   width: 100% !important;
9
   padding: 0px 0px 0px 0px !important;
10
   padding: 0px 0px 0px 0px !important;
11
+  background-color: #d6f8df;
10
 }
12
 }
11
 
13
 
12
 main.notion-page-no-cover {
14
 main.notion-page-no-cover {
13
   padding-top: 0px !important;
15
   padding-top: 0px !important;
14
   margin-top: 0px !important;
16
   margin-top: 0px !important;
17
+  background-color: #d6f8df;
15
 }
18
 }
16
 
19
 
17
 .notion-blank {
20
 .notion-blank {
18
   display: none !important;
21
   display: none !important;
22
+  background-color: #d6f8df;
23
+  
19
 }
24
 }
20
 
25
 
21
 .video {
26
 .video {
34
   right: 0;
39
   right: 0;
35
   width: 100%;
40
   width: 100%;
36
   height: 100%;
41
   height: 100%;
37
-}
42
+}

+ 31
- 0
src/theme/variables.css View File

74
   --ion-color-light-contrast-rgb: 0, 0, 0;
74
   --ion-color-light-contrast-rgb: 0, 0, 0;
75
   --ion-color-light-shade: #d7d8da;
75
   --ion-color-light-shade: #d7d8da;
76
   --ion-color-light-tint: #f5f6f9;
76
   --ion-color-light-tint: #f5f6f9;
77
+
78
+  /** Color styling for the app **/
79
+
80
+  /* --ion-background-color: #bcf5a7;
81
+  --ion-tab-bar-background:#FFE001;
82
+  --ion-toolbar-color:#000000;
83
+  --ion-tab-bar-color:#ee3c2c;
84
+  --ion-tab-bar-color-selected:#39c6e3;
85
+  --ion-border-color:#000000;
86
+  --ion-toolbar-background:#39c6e3; */
87
+  --ion-background-color:#d6f8df;
88
+--ion-background-color-rgb:rgb(255, 255, 255);
89
+--ion-text-color:#000000;	 
90
+--ion-text-color-rgb:rgb(0, 0, 0);	
91
+--ion-tab-bar-background:#51c16b;
92
+--ion-tab-bar-border-color:#727272;
93
+--ion-tab-bar-color:#defbe3;
94
+--ion-tab-bar-color-selected:#165cf3;
95
+--ion-toolbar-background:#6e99f5;
96
+--ion-toolbar-border-color:#727272; 
97
+--ion-toolbar-color:#000000;
98
+--ion-toolbar-segment-color:#ffffff; 
99
+--ion-toolbar-segment-color-checked:#ffffff;
100
+--ion-toolbar-segment-background:#ffffff; 
101
+--ion-toolbar-segment-background-checked:#ffffff;
102
+--ion-toolbar-segment-indicator-color:#614848; 
103
+--ion-item-background:#defbe3; 
104
+--ion-item-border-color:#ff9a9a87;
105
+--ion-item-color:#000000; 
106
+--ion-placeholder-color:#ffffff;
107
+  
77
 }
108
 }
78
 
109
 
79
 /*
110
 /*