Skip to content

Commit 89fb712

Browse files
thedannywahlthedannywahl
committed
update Theme
1 parent e1181cd commit 89fb712

File tree

11 files changed

+307
-221
lines changed

11 files changed

+307
-221
lines changed

‎public/banner.jpg‎

-101 KB
Binary file not shown.

‎public/banner.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/App.css‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,48 @@
1-
#App .logoWrapper::after {
1+
.logoWrapper::after {
22
content: "";
33
position: absolute;
44
left: 50%;
55
top: 50%;
66
width: 425px;
77
height: 425px;
8-
background-image: url("/banner.jpg");
8+
background-image: url("/banner.svg");
99
background-size: cover;
1010
background-position: center;
1111
z-index: -1;
1212
transition: transform 0.3s;
1313
transform: translate(-50%, -50%);
1414
pointer-events: none;
15-
animation: rotate-bg 30s linear infinite;
15+
animation: rotate-bg 45s linear infinite;
16+
}
17+
18+
.cta [class$="-baseButton__content"] {
19+
background: linear-gradient(90deg, #fff, #fff 50%, #061c30 50%) 100% 100%/205% 100%;
20+
transition: background-position .4s, color .3s, box-shadow .3s;
21+
}
22+
23+
.cta button:hover:not(:disabled)>[class$="-baseButton__content"],
24+
.cta button:focus:not(:disabled)>[class$="-baseButton__content"],
25+
.cta button:active:not(:disabled)>[class$="-baseButton__content"] {
26+
color: #061C30;
27+
background: linear-gradient(90deg, #fff, #fff 50%, #061c30 50%) 1% 100%/205% 100%;
28+
29+
}
30+
31+
.submit [class$="-baseButton__content"] {
32+
background: linear-gradient(90deg, #fff, #fff 50%, #0e68b3 50%) 100% 100%/205% 100%;
33+
transition: background-position .4s, color .3s, box-shadow .3s;
34+
color: #fff;
35+
}
1636

37+
.submit button:hover:not(:disabled)>[class$="-baseButton__content"],
38+
.submit button:focus:not(:disabled)>[class$="-baseButton__content"],
39+
.submit button:active:not(:disabled)>[class$="-baseButton__content"] {
40+
background: linear-gradient(90deg, #fff, #fff 50%, #0e68b3 50%) 1% 100%/205% 100%;
41+
color: #0e68b3;
1742
}
1843

1944
@media (prefers-reduced-motion: reduce) {
20-
#App .logoWrapper::after {
45+
.logoWrapper::after {
2146
animation: none;
2247
transition: none;
2348
}

‎src/App.tsx‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,36 @@ import SignupModal from "./components/SignupModal";
99
import SubmissionModal from "./components/SubmissionModal";
1010

1111
const App: FC = () => {
12-
const { instructure, mastery } = Brands;
12+
const { Instructure, Mastery } = Brands;
13+
const inst25 = "#0E68B3";
14+
const inst25h = "#0E35B3";
1315

1416
const themeOverrides = {
1517
canvas: {
1618
componentOverrides: {
19+
Button: {
20+
borderRadius: "2rem",
21+
borderWidth: "0.125rem",
22+
fontWeight: 700,
23+
primaryActiveBackground: inst25h,
24+
primaryBackground: inst25,
25+
primaryBorderColor: inst25h,
26+
primaryHoverBackground: inst25h,
27+
primaryInverseColor: "#fff",
28+
},
1729
Link: {
18-
color: "#0E68B3",
19-
hoverColor: "#0E35B3",
30+
color: inst25,
31+
hoverColor: inst25h,
2032
},
2133
ProgressCircle: {
22-
meterColorSuccess: mastery.color,
34+
meterColorSuccess: Mastery.color,
2335
},
2436
SourceCodeEditor: {
25-
focusBorderColor: "#0E68B3",
37+
focusBorderColor: inst25,
2638
},
2739
},
28-
"ic-brand-font-color-dark": instructure.color,
29-
"ic-brand-primary": "#0E68B3",
40+
"ic-brand-font-color-dark": Instructure.color,
41+
"ic-brand-primary": inst25,
3042
typography: {
3143
fontFamily: "circularxx, Arial, Helvetica, sans-serif",
3244
},
@@ -52,42 +64,36 @@ const App: FC = () => {
5264
themeOverrides: themeOverrides,
5365
}}
5466
>
55-
{window.location.hash === "#/test" ? (
56-
<View as="div" id="App">
57-
<View as="section">
58-
<Banner variant="new" />
59-
</View>
60-
<View
61-
as="main"
62-
insetBlockEnd="0"
63-
insetInlineEnd="0"
64-
padding="medium"
65-
position="fixed"
66-
>
67-
<SignupModal
68-
setError={setError}
69-
setIsSubmissionModalOpen={setIsSubmissionModalOpen}
70-
setIsTrayOpen={setIsTrayOpen}
71-
setSuccess={setSuccess}
72-
/>
73-
</View>
74-
<View as="aside">
75-
<HelpTray isTrayOpen={isTrayOpen} setIsTrayOpen={setIsTrayOpen} />
76-
</View>
77-
<View as="aside">
78-
<SubmissionModal
79-
hasError={hasError}
80-
hasSuccess={hasSuccess}
81-
isOpen={isSubmissionModalOpen}
82-
setIsOpen={setIsSubmissionModalOpen}
83-
/>
84-
</View>
85-
</View>
86-
) : (
67+
<View as="div" id="App">
8768
<View as="section">
88-
<Banner href="https://www.instructure.com/instructurecon/spokane" />
69+
<Banner variant="new" />
70+
</View>
71+
<View
72+
as="main"
73+
insetBlockEnd="0"
74+
insetInlineStart="0"
75+
padding="medium"
76+
position="fixed"
77+
>
78+
<SignupModal
79+
setError={setError}
80+
setIsSubmissionModalOpen={setIsSubmissionModalOpen}
81+
setIsTrayOpen={setIsTrayOpen}
82+
setSuccess={setSuccess}
83+
/>
84+
</View>
85+
<View as="aside">
86+
<HelpTray isTrayOpen={isTrayOpen} setIsTrayOpen={setIsTrayOpen} />
87+
</View>
88+
<View as="aside">
89+
<SubmissionModal
90+
hasError={hasError}
91+
hasSuccess={hasSuccess}
92+
isOpen={isSubmissionModalOpen}
93+
setIsOpen={setIsSubmissionModalOpen}
94+
/>
8995
</View>
90-
)}
96+
</View>
9197
</InstUISettingsProvider>
9298
);
9399
};

0 commit comments

Comments
 (0)