Skip to content

Commit 72baa23

Browse files
author
MFrikken
committed
Changes to UI and identity
1 parent c848df1 commit 72baa23

File tree

11 files changed

+87
-67
lines changed

11 files changed

+87
-67
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<img src="img/SAGE_logo.png" width="128">
1+
<img src="src/main/resources/logos/transparent_desktop_icon.png" width="256">
22

33
# SAST Assessment and Gathering Engine (SAGE)
44

@@ -49,4 +49,4 @@ To contribute:
4949
This project is licensed under the MIT License. See [LICENSE](LICENSE) file for details.
5050
5151
## Powered by
52-
<img src="img/IWT_Machines_logo.png" width="128">
52+
<img src="src/main/resources/logos/IWT_Machines_logo.png" width="128">

‎img/SAGE_logo.png‎

-1.29 MB
Binary file not shown.

‎src/main/java/com/sage/Main.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ public void start(Stage stage) throws Exception {
4646
Scene scene = new Scene(root, 1500, 900);
4747
stage.setScene(scene);
4848
stage.setTitle("Sage UI");
49-
stage.getIcons().add(new Image(getClass().getResourceAsStream("/icons/sage-icon.png")));
49+
stage.getIcons().add(new Image(getClass().getResourceAsStream("/logos/taskbar_icon.png")));
5050
stage.show();
5151
}
5252
}

‎src/main/resources/css/style.css‎

Lines changed: 83 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,104 +8,124 @@
88

99
:root {
1010
/** Base colors */
11-
--clr-dark-a0: #000000;
12-
--clr-light-a0: #ffffff;
13-
14-
/** Dark theme primary colors */
15-
--clr-primary-a0: #ffb22c;
16-
--clr-primary-a10: #ffba49;
17-
--clr-primary-a20: #ffc362;
18-
--clr-primary-a30: #ffcb79;
19-
--clr-primary-a40: #ffd490;
20-
--clr-primary-a50: #ffdca6;
21-
22-
/** Dark theme surface colors */
23-
--clr-surface-a0: #121212;
24-
--clr-surface-a10: #282828;
25-
--clr-surface-a20: #3f3f3f;
26-
--clr-surface-a30: #575757;
27-
--clr-surface-a40: #717171;
28-
--clr-surface-a50: #8b8b8b;
29-
30-
/** Dark theme tonal surface colors */
31-
--clr-surface-tonal-a0: #272017;
32-
--clr-surface-tonal-a10: #3c352c;
33-
--clr-surface-tonal-a20: #514b43;
34-
--clr-surface-tonal-a30: #68625b;
35-
--clr-surface-tonal-a40: #7f7a74;
36-
--clr-surface-tonal-a50: #98938e;
11+
--clr-dark: #000000;
12+
--clr-light: #ffffff;
13+
14+
/** Primary colors (Green tones) */
15+
--clr-primary-0: #657B58;
16+
--clr-primary-10: #7A8E6A;
17+
--clr-primary-20: #8FA17D;
18+
--clr-primary-30: #A3B38F;
19+
--clr-primary-40: #B8C6A2;
20+
--clr-primary-50: #CDDBB5;
21+
22+
/** Light mode */
23+
24+
/** Surface colors */
25+
--clr-surface-0: #FAF7F0;
26+
--clr-surface-10: #F0ECE4;
27+
--clr-surface-20: #E5E1D9;
28+
--clr-surface-30: #DBD6CE;
29+
--clr-surface-40: #D0CCC4;
30+
--clr-surface-50: #C6C2BA;
31+
32+
/** Tonal surface colors */
33+
--clr-surface-tonal-0: #E6EFE3;
34+
--clr-surface-tonal-10: #D9E2D7;
35+
--clr-surface-tonal-20: #CDD6CB;
36+
--clr-surface-tonal-30: #C1CABF;
37+
--clr-surface-tonal-40: #B5BEB4;
38+
--clr-surface-tonal-50: #A9B2A9;
39+
40+
/** Dark mode */
41+
42+
/** Surface colors */
43+
--clr-surface-0-dark: #121212;
44+
--clr-surface-10-dark: #282828;
45+
--clr-surface-20-dark: #3f3f3f;
46+
--clr-surface-30-dark: #575757;
47+
--clr-surface-40-dark: #717171;
48+
--clr-surface-50-dark: #8b8b8b;
49+
50+
/** Tonal surface colors */
51+
--clr-surface-tonal-0-dark: #1B201A;
52+
--clr-surface-tonal-10-dark: #2F342D;
53+
--clr-surface-tonal-20-dark: #444941;
54+
--clr-surface-tonal-30-dark: #5B6057;
55+
--clr-surface-tonal-40-dark: #72766D;
56+
--clr-surface-tonal-50-dark: #8A8E84;
3757
}
3858

3959
* {
4060
font-family: "Inter", Arial, sans-serif;
41-
color: var(--clr-light-a0);
61+
color: var(--clr-dark);
4262
}
4363

4464
body {
45-
background-color: var(--clr-surface-a0);
65+
background-color: var(--clr-light);
4666
}
4767

4868
ul {
49-
list-style-type: none;
69+
list-style-type: none;
5070
padding: 0;
5171
margin: 0;
5272
}
5373

5474
li {
55-
padding: 10px 20px;
56-
font-size: 16px;
57-
color: var(--clr-light-a0);
58-
background-color: var(--clr-surface-a0);
75+
padding: 10px 20px;
76+
font-size: 16px;
77+
color: var(--clr-dark);
78+
background-color: var(--clr-surface-0);
5979
}
6080

6181
li:nth-child(even) {
62-
background-color: var(--clr-surface-a10);
82+
background-color: var(--clr-light);
6383
}
6484

6585
li:nth-child(odd) {
66-
background-color: var(--clr-surface-a0);
86+
background-color: var(--clr-surface-0);
6787
}
6888

6989
button {
70-
padding: 12px 20px;
90+
padding: 12px 20px;
7191
display: flex;
7292
align-items: center;
73-
gap: 10px;
74-
font-size: 15px;
75-
font-weight: 900;
76-
border: 2px solid var(--clr-primary-a20);
77-
border-radius: 8px;
78-
color: var(--clr-dark-a0);
79-
background-color: var(--clr-primary-a20);
80-
cursor: pointer;
81-
text-align: center;
82-
outline: none;
83-
transition: all 0.05s ease;
93+
gap: 10px;
94+
font-size: 15px;
95+
font-weight: 900;
96+
border: 2px solid var(--clr-primary-20);
97+
border-radius: 8px;
98+
color: var(--clr-surface-0);
99+
background-color: var(--clr-primary-20);
100+
cursor: pointer;
101+
text-align: center;
102+
outline: none;
103+
transition: all 0.05s ease;
84104
}
85105

86106
button:hover {
87-
background-color: var(--clr-primary-a10);
88-
border-color: var(--clr-primary-a10);
107+
background-color: var(--clr-primary-10);
108+
border-color: var(--clr-primary-10);
89109
}
90110

91111
button.secondary {
92-
background-color: var(--clr-surface-a0);
93-
color: var(--clr-primary-a20);
94-
border: 2px solid var(--clr-primary-a20);
112+
background-color: var(--clr-surface-0);
113+
color: var(--clr-primary-20);
114+
border: 2px solid var(--clr-primary-20);
95115
}
96116

97117
button.secondary:hover {
98-
background-color: var(--clr-primary-a10);
99-
border-color: var(--clr-primary-a10);
100-
color: var(--clr-dark-a0);
118+
background-color: var(--clr-primary-10);
119+
border-color: var(--clr-primary-10);
120+
color: var(--clr-light);
101121
}
102122

103123
button:disabled {
104-
background-color: transparent;
105-
border: 2px solid var(--clr-surface-a50);
106-
color: var(--clr-surface-a50);
107-
cursor: not-allowed;
108-
box-shadow: none;
124+
background-color: transparent;
125+
border: 2px solid var(--clr-surface-50);
126+
color: var(--clr-surface-50);
127+
cursor: not-allowed;
128+
box-shadow: none;
109129
}
110130

111131
.header {
@@ -118,11 +138,11 @@ button:disabled {
118138
}
119139

120140
.title-sage {
121-
color: var(--clr-primary-a30);
141+
color: var(--clr-primary-30);
122142
font-size: 20px;
123143
}
124144

125145
.title-page {
126-
color: var(--clr-light-a0);
146+
color: var(--clr-dark);
127147
font-size: 40px;
128-
}
148+
}

‎src/main/resources/html/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>SAGE UI</title>
88
<link rel="stylesheet" href="../css/style.css">
99
<script defer src="../js/script.js">
10-
alert("JS Loaded!"); // This should pop up immediately if JS is loaded
10+
alert("JS Loaded!"); // This should pop up immediately if JS is loaded
1111
</script>
1212
</head>
1313

‎src/main/resources/icons/sage-icon.png‎

-154 KB
Binary file not shown.

img/IWT_Machines_logo.png renamed to src/main/resources/logos/IWT_Machines_logo.png

File renamed without changes.

‎src/main/resources/logos/logo.png‎

44.6 KB
Loading

‎src/main/resources/logos/logo_background.png‎

247 KB
Loading

‎src/main/resources/logos/taskbar_icon.png‎

31.2 KB
Loading

0 commit comments

Comments
 (0)