From 71745d6e19090f4a5320173c4f723c11f2655de9 Mon Sep 17 00:00:00 2001 From: Charles Le Maux Date: Thu, 4 Jul 2024 14:37:32 +0100 Subject: [PATCH] [~] New button styles --- src/assets/frameworks/delete.png | Bin 0 -> 12451 bytes src/components/serverCard/serverCard.jsx | 11 +++-- .../serverCard/serverCard.module.scss | 44 +++++++++++++----- 3 files changed, 38 insertions(+), 17 deletions(-) create mode 100644 src/assets/frameworks/delete.png diff --git a/src/assets/frameworks/delete.png b/src/assets/frameworks/delete.png new file mode 100644 index 0000000000000000000000000000000000000000..1f49fd9c5782dc45b7bed51b710ce64bb6d658e7 GIT binary patch literal 12451 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 { @@ -50,21 +51,21 @@ const ServerCard = ({status, version, link, name, framework, onRunClick, onStopC
{name}
- {`${name} + {`${name}
{!status && ( - + )} {status && ( - + )}
Version: {version}
-
Adresse ip: {"" + ".servii.fr"}
- +
+ ); }; diff --git a/src/components/serverCard/serverCard.module.scss b/src/components/serverCard/serverCard.module.scss index 5fdf92c..125f28e 100644 --- a/src/components/serverCard/serverCard.module.scss +++ b/src/components/serverCard/serverCard.module.scss @@ -16,20 +16,40 @@ align-items: center; } -.statusOuterDot { - width: 14px; - height: 14px; - border-radius: 50%; - background-color: gray; - display: flex; - align-items: center; - justify-content: center; - margin-right: 8px; -} - -.statusInnerDot { +.frameworkIcon { width: 27px; height: 27px; + pointer-events: none; +} + +.stoppedButton{ + background-color: #008d5f; + color: white; + border: none; + padding: 10px 20px; + border-radius: 0.6rem; + outline: none; + cursor: pointer; + transition: background-color 0.3s ease; /* Smooth transition for color change */ +} +.runningButton{ + background-color: #8d213e; + color: white; + border: none; + padding: 10px 20px; + border-radius: 0.6rem; + outline: none; + cursor: pointer; + transition: background-color 0.3s ease; /* Smooth transition for color change */ +} +.deleteButton{ + width: 20px; + height: 20px; + user-select: none; + pointer-events: none; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE/Edge */ } .name {