cybercore-systems/cybercore-signer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): modernize icons to outline style with accent and update fallbacks

Browse Source
This commit is contained in:
Claudecio Martins
2026-10-20 22:17:14 -03:00
parent ed69db4d59
commit be281d1d04
5 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/cert.svg
+5 -5
View File
@@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="3.5" y="2.5" width="17" height="19" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="10" r="2.5" fill="none" stroke="#0288d1" stroke-width="1.8"/> <line x1="7" y1="6.5" x2="13" y2="6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M 10.5 12.2 L 9.5 17 L 12 15.5 L 14.5 17 L 13.5 12.2" fill="none" stroke="#0288d1" stroke-width="1.8" stroke-linejoin="round"/> <line x1="7" y1="9.5" x2="11" y2="9.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
<line x1="6" y1="7" x2="8" y2="7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/> <circle cx="14.5" cy="14.5" r="3.5" fill="none" stroke="#0288d1" stroke-width="1.8"/>
<line x1="16" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/> <path d="M 13 14.5 L 14.2 15.7 L 16.5 13.2" fill="none" stroke="#0288d1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 625 B

After

Width:  |  Height:  |  Size: 659 B

assets/icons/seal.svg
+5 -3
View File
@@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="10" r="7.5" fill="none" stroke="#f59e0b" stroke-width="2"/> <rect x="2.5" y="4.5" width="19" height="15" rx="3" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="10" r="4.5" fill="none" stroke="#f59e0b" stroke-width="1.2" stroke-dasharray="2 1.5"/> <path d="M 6 13.5 C 7.5 10 9 10 10.5 13 C 11.5 15 13 11 15 12" fill="none" stroke="#0288d1" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 9.5 15.5 L 7 21.5 L 12 19 L 17 21.5 L 14.5 15.5" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linejoin="round"/> <circle cx="17.5" cy="8.5" r="1.5" fill="#f59e0b"/>
<line x1="6" y1="8.5" x2="13" y2="8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
<line x1="6" y1="16" x2="18" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 418 B

After

Width:  |  Height:  |  Size: 654 B

modules/cybercore-ui/src/main/java/br/com/cybercore/signer/ui/components/SvgIcons.java
+51 -30
View File
@@ -14,6 +14,8 @@ import javafx.scene.shape.Circle;
import javafx.scene.shape.Polygon; import javafx.scene.shape.Polygon;
import javafx.scene.shape.Rectangle; import javafx.scene.shape.Rectangle;
import javafx.scene.shape.SVGPath; import javafx.scene.shape.SVGPath;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
import javafx.scene.text.Font; import javafx.scene.text.Font;
import javafx.scene.text.FontWeight; import javafx.scene.text.FontWeight;
import javafx.scene.text.Text; import javafx.scene.text.Text;
@@ -477,11 +479,21 @@ public final class SvgIcons {
StackPane box = new StackPane(); StackPane box = new StackPane();
box.setPrefSize(24, 24); box.setPrefSize(24, 24);
Text code = new Text("</>"); SVGPath frame = new SVGPath();
code.setFont(Font.font("Segoe UI", FontWeight.BOLD, 12)); frame.setContent("M 3 5 C 3 3.9 3.9 3 5 3 L 19 3 C 20.1 3 21 3.9 21 5 L 21 19 C 21 20.1 20.1 21 19 21 L 5 21 C 3.9 21 3 20.1 3 19 Z");
code.setFill(Color.web("#0288d1")); frame.setFill(Color.TRANSPARENT);
frame.setStroke(Color.web("#1e293b"));
frame.setStrokeWidth(1.8);
box.getChildren().add(code); SVGPath prompt = new SVGPath();
prompt.setContent("M 7 9 L 10 12 L 7 15 M 12 15 L 16 15");
prompt.setFill(Color.TRANSPARENT);
prompt.setStroke(Color.web("#0288d1"));
prompt.setStrokeWidth(1.8);
prompt.setStrokeLineCap(StrokeLineCap.ROUND);
prompt.setStrokeLineJoin(StrokeLineJoin.ROUND);
box.getChildren().addAll(frame, prompt);
return box; return box;
} }
@@ -538,20 +550,21 @@ public final class SvgIcons {
StackPane box = new StackPane(); StackPane box = new StackPane();
box.setPrefSize(24, 24); box.setPrefSize(24, 24);
SVGPath folder = new SVGPath(); SVGPath certFrame = new SVGPath();
folder.setContent("M 2 5 L 8 5 L 10 7 L 22 7 L 22 20 L 2 20 Z"); certFrame.setContent("M 4 4 C 4 3 5 2 6 2 L 18 2 C 19 2 20 3 20 4 L 20 20 C 20 21 19 22 18 22 L 6 22 C 5 22 4 21 4 20 Z M 7 6 L 14 6 M 7 9 L 12 9");
folder.setFill(Color.web("#e1f5fe")); certFrame.setFill(Color.TRANSPARENT);
folder.setStroke(Color.web("#0288d1")); certFrame.setStroke(Color.web("#1e293b"));
folder.setStrokeWidth(1.5); certFrame.setStrokeWidth(1.8);
Rectangle lock = new Rectangle(7, 6); SVGPath badge = new SVGPath();
lock.setArcWidth(2); badge.setContent("M 15 13 A 3.2 3.2 0 1 1 15 13.01 M 13.5 15 L 14.8 16.2 L 17 14");
lock.setArcHeight(2); badge.setFill(Color.TRANSPARENT);
lock.setFill(Color.web("#0288d1")); badge.setStroke(Color.web("#0288d1"));
lock.setTranslateX(3); badge.setStrokeWidth(1.6);
lock.setTranslateY(2); badge.setStrokeLineCap(StrokeLineCap.ROUND);
badge.setStrokeLineJoin(StrokeLineJoin.ROUND);
box.getChildren().addAll(folder, lock); box.getChildren().addAll(certFrame, badge);
return box; return box;
} }
@@ -624,23 +637,31 @@ public final class SvgIcons {
StackPane box = new StackPane(); StackPane box = new StackPane();
box.setPrefSize(38, 38); box.setPrefSize(38, 38);
SVGPath ribbon = new SVGPath(); SVGPath frame = new SVGPath();
ribbon.setContent("M 14 26 L 19 36 L 24 26 Z M 9 26 L 12 34 L 15 26 Z"); frame.setContent("M 6 8 C 4.9 8 4 8.9 4 10 L 4 28 C 4 29.1 4.9 30 6 30 L 32 30 C 33.1 30 34 29.1 34 28 L 34 10 C 34 8.9 33.1 8 32 8 Z");
ribbon.setFill(Color.web("#f59e0b")); frame.setFill(Color.TRANSPARENT);
frame.setStroke(Color.web("#1e293b"));
frame.setStrokeWidth(1.8);
Circle sealCircle = new Circle(13); SVGPath lines = new SVGPath();
sealCircle.setFill(Color.web("#d97706")); lines.setContent("M 8 13 L 20 13 M 8 25 L 30 25");
sealCircle.setStroke(Color.web("#fbbf24")); lines.setFill(Color.TRANSPARENT);
sealCircle.setStrokeWidth(1.6); lines.setStroke(Color.web("#64748b"));
sealCircle.setTranslateY(-4); lines.setStrokeWidth(1.4);
lines.setStrokeLineCap(StrokeLineCap.ROUND);
SVGPath star = new SVGPath(); Circle dot = new Circle(28, 13, 2);
star.setContent("M 19 8 L 21 13 L 26 13 L 22 16 L 24 21 L 19 18 L 14 21 L 16 16 L 12 13 L 17 13 Z"); dot.setFill(Color.web("#f59e0b"));
star.setFill(Color.web("#ffffff"));
star.setTranslateX(-9);
star.setTranslateY(-14);
box.getChildren().addAll(ribbon, sealCircle, star); SVGPath signature = new SVGPath();
signature.setContent("M 8 20 C 11 16 13 16 15 20 C 17 23 20 17 23 18");
signature.setFill(Color.TRANSPARENT);
signature.setStroke(Color.web("#0288d1"));
signature.setStrokeWidth(2.0);
signature.setStrokeLineCap(StrokeLineCap.ROUND);
signature.setStrokeLineJoin(StrokeLineJoin.ROUND);
box.getChildren().addAll(frame, lines, dot, signature);
return box; return box;
} }
modules/cybercore-ui/src/main/resources/assets/icons/cert.svg
+5 -5
View File
@@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="3.5" y="2.5" width="17" height="19" rx="2.5" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="10" r="2.5" fill="none" stroke="#0288d1" stroke-width="1.8"/> <line x1="7" y1="6.5" x2="13" y2="6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M 10.5 12.2 L 9.5 17 L 12 15.5 L 14.5 17 L 13.5 12.2" fill="none" stroke="#0288d1" stroke-width="1.8" stroke-linejoin="round"/> <line x1="7" y1="9.5" x2="11" y2="9.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
<line x1="6" y1="7" x2="8" y2="7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/> <circle cx="14.5" cy="14.5" r="3.5" fill="none" stroke="#0288d1" stroke-width="1.8"/>
<line x1="16" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/> <path d="M 13 14.5 L 14.2 15.7 L 16.5 13.2" fill="none" stroke="#0288d1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 625 B

After

Width:  |  Height:  |  Size: 659 B

modules/cybercore-ui/src/main/resources/assets/icons/seal.svg
+5 -3
View File
@@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="10" r="7.5" fill="none" stroke="#f59e0b" stroke-width="2"/> <rect x="2.5" y="4.5" width="19" height="15" rx="3" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="10" r="4.5" fill="none" stroke="#f59e0b" stroke-width="1.2" stroke-dasharray="2 1.5"/> <path d="M 6 13.5 C 7.5 10 9 10 10.5 13 C 11.5 15 13 11 15 12" fill="none" stroke="#0288d1" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M 9.5 15.5 L 7 21.5 L 12 19 L 17 21.5 L 14.5 15.5" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linejoin="round"/> <circle cx="17.5" cy="8.5" r="1.5" fill="#f59e0b"/>
<line x1="6" y1="8.5" x2="13" y2="8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
<line x1="6" y1="16" x2="18" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 418 B

After

Width:  |  Height:  |  Size: 654 B