From 180670176b1ea7c8dd533c9a008084912b34d639 Mon Sep 17 00:00:00 2001 From: Hermione Dadheech Date: Tue, 24 Sep 2024 15:39:54 +0530 Subject: [PATCH] chore: UI changes Signed-off-by: Hermione Dadheech --- sidebar/cicd.svg | 7 + sidebar/configure-svgrepo-com.svg | 2 + sidebar/configure.svg | 18 ++ sidebar/docs.svg | 10 + sidebar/record-circle-svgrepo-com 1.svg | 4 + sidebar/record.svg | 4 + sidebar/replay-svgrepo-com 1.svg | 4 + sidebar/replay.svg | 4 + sidebar/settings.png | Bin 18640 -> 0 bytes sidebar/settings.svg | 7 + sidebar/sidebar.css | 41 ++- sidebar/sidebar.js | 16 ++ sidebar/support.svg | 3 + sidebar/user-add-svgrepo-com 1.svg | 6 + webviews/components/Config.svelte | 50 ++-- webviews/components/KeployHome.svelte | 365 ++++++++++++++++-------- webviews/components/UtgDocs.svelte | 49 +++- 17 files changed, 438 insertions(+), 152 deletions(-) create mode 100644 sidebar/cicd.svg create mode 100644 sidebar/configure-svgrepo-com.svg create mode 100644 sidebar/configure.svg create mode 100644 sidebar/docs.svg create mode 100644 sidebar/record-circle-svgrepo-com 1.svg create mode 100644 sidebar/record.svg create mode 100644 sidebar/replay-svgrepo-com 1.svg create mode 100644 sidebar/replay.svg delete mode 100644 sidebar/settings.png create mode 100644 sidebar/settings.svg create mode 100644 sidebar/support.svg create mode 100644 sidebar/user-add-svgrepo-com 1.svg diff --git a/sidebar/cicd.svg b/sidebar/cicd.svg new file mode 100644 index 0000000..0dc5e8b --- /dev/null +++ b/sidebar/cicd.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/sidebar/configure-svgrepo-com.svg b/sidebar/configure-svgrepo-com.svg new file mode 100644 index 0000000..9389051 --- /dev/null +++ b/sidebar/configure-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/sidebar/configure.svg b/sidebar/configure.svg new file mode 100644 index 0000000..7ffae8a --- /dev/null +++ b/sidebar/configure.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/sidebar/docs.svg b/sidebar/docs.svg new file mode 100644 index 0000000..898f529 --- /dev/null +++ b/sidebar/docs.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/sidebar/record-circle-svgrepo-com 1.svg b/sidebar/record-circle-svgrepo-com 1.svg new file mode 100644 index 0000000..938eb75 --- /dev/null +++ b/sidebar/record-circle-svgrepo-com 1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/sidebar/record.svg b/sidebar/record.svg new file mode 100644 index 0000000..a0d2f61 --- /dev/null +++ b/sidebar/record.svg @@ -0,0 +1,4 @@ + + + + diff --git a/sidebar/replay-svgrepo-com 1.svg b/sidebar/replay-svgrepo-com 1.svg new file mode 100644 index 0000000..c689bac --- /dev/null +++ b/sidebar/replay-svgrepo-com 1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/sidebar/replay.svg b/sidebar/replay.svg new file mode 100644 index 0000000..62caad0 --- /dev/null +++ b/sidebar/replay.svg @@ -0,0 +1,4 @@ + + + + diff --git a/sidebar/settings.png b/sidebar/settings.png deleted file mode 100644 index a69af698581d921821f6704351f24ec6d858e1bc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 18640 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 + + + + + + diff --git a/sidebar/sidebar.css b/sidebar/sidebar.css index 07c9e7c..fe04737 100644 --- a/sidebar/sidebar.css +++ b/sidebar/sidebar.css @@ -3,8 +3,6 @@ button { /* background-color: black; */ color: white; height: fit-content; - padding: 14px 20px; - margin: 4px 4px; border: none; width: 100%; cursor: pointer; @@ -263,7 +261,23 @@ hr { width: 20px; height: 20px; transition: transform 0.3s; - background: url("settings.png") no-repeat center center; + background: url("settings.svg") no-repeat center center; + background-size: contain; +} +.docs-icon { + display: inline-block; + width: 20px; + height: 20px; + transition: transform 0.3s; + background: url("docs.svg") no-repeat center center; + background-size: contain; +} +.support-icon { + display: inline-block; + width: 20px; + height: 20px; + transition: transform 0.3s; + background: url("support.svg") no-repeat center center; background-size: contain; } .history-icon { @@ -291,11 +305,17 @@ hr { width: 20px; height: 20px; transition: transform 0.3s; - background: url("replay.png") no-repeat center center; + background: url("replay.svg") no-repeat center center; + background-size: contain; +} +.record-icon { + display: inline-block; + width: 20px; + height: 20px; + transition: transform 0.3s; + background: url("record.svg") no-repeat center center; background-size: contain; - color: tomato; } - .code-icon { background: url("code-icon.png") no-repeat center center; background-size: contain; @@ -320,3 +340,12 @@ hr { text-align: left; cursor: pointer; } +.cicd-icon { + display: inline-block; + width: 20px; + height: 20px; + transition: transform 0.3s; + background: url("cicd.svg") no-repeat center center; + background-size: contain; +} + diff --git a/sidebar/sidebar.js b/sidebar/sidebar.js index 26ef5db..eee8832 100644 --- a/sidebar/sidebar.js +++ b/sidebar/sidebar.js @@ -453,11 +453,17 @@ window.addEventListener('message', event => { errorMessage.classList.add("error"); recordedTestCasesDiv.appendChild(errorMessage); viewRecordLogsButton.style.display = "block"; + viewTestLogsButton.style.display = "block"; + viewTestLogsButton.disabled = true; + viewTestLogsButton.style.cursor = "not-allowed"; return; } if (message.noTestCases === true) { viewRecordLogsButton.style.display = "block"; + viewTestLogsButton.style.display = "block"; + viewTestLogsButton.disabled = true; + viewTestLogsButton.style.cursor = "not-allowed"; recordStatus.textContent = `No Test Cases Recorded`; recordedTestCasesDiv.style.display = "none"; recordStatus.classList.add("info"); @@ -545,6 +551,10 @@ window.addEventListener('message', event => { const numErrors = message.textSummary.split(":")[1]; if (numErrors !== " 0") { viewTestLogsButton.style.display = "block"; + viewTestLogsButton.disabled = false; + viewTestLogsButton.style.cursor = "pointer"; + viewRecordLogsButton.style.display = "block"; + } testCaseElement.classList.add("error"); } @@ -578,6 +588,9 @@ window.addEventListener('message', event => { if (message.error === true) { viewCompleteSummaryButton.style.display = "none"; viewTestLogsButton.style.display = "block"; + viewTestLogsButton.disabled = false; + viewTestLogsButton.style.cursor = "pointer"; + viewRecordLogsButton.style.display = "block"; } else { viewCompleteSummaryButton.style.display = "block"; @@ -585,6 +598,9 @@ window.addEventListener('message', event => { } if (message.error === true) { viewTestLogsButton.style.display = "block"; + viewTestLogsButton.disabled = false; + viewTestLogsButton.style.cursor = "pointer"; + viewRecordLogsButton.style.display = "block"; if (testStatus) { testStatus.textContent = message.value; testStatus.classList.add("error"); diff --git a/sidebar/support.svg b/sidebar/support.svg new file mode 100644 index 0000000..9e89b13 --- /dev/null +++ b/sidebar/support.svg @@ -0,0 +1,3 @@ + + + diff --git a/sidebar/user-add-svgrepo-com 1.svg b/sidebar/user-add-svgrepo-com 1.svg new file mode 100644 index 0000000..755d676 --- /dev/null +++ b/sidebar/user-add-svgrepo-com 1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/webviews/components/Config.svelte b/webviews/components/Config.svelte index 4e93286..a60648a 100644 --- a/webviews/components/Config.svelte +++ b/webviews/components/Config.svelte @@ -53,14 +53,16 @@ let showSettings = false; } -

-
-
+
+
+
+ src="https://raw.githubusercontent.com/Sarthak160/goApi/a47fc440a11368062260dcff9828b468bc9b2872/print_transparent.svg" + alt="Keploy" + class="logo" + /> +
+

Welcome to Keploy

@@ -109,7 +111,20 @@ let showSettings = false; height: 100%; width: 100%; } - + .container-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: left; + height: 100%; + padding: 2rem; + background-color: black; + border: 1px solid #f77b3e; + border-radius: 5px; + transition: all 0.3s ease; + box-shadow: inset 0px 4px 36px 1px rgba(255, 145, 77, 0.8), + inset 0px 4px 4px 0px rgba(255, 153, 0, 0.8); + } .logo { height: 40px; vertical-align: top; @@ -147,26 +162,21 @@ let showSettings = false; height: 100vh; display: flex; flex-direction: column; - justify-content: space-between; padding: 10px; } .header { - flex: 0 0 20%; - padding-top: 40px; + flex: 0 0 15%; display: flex; flex-direction: row; justify-content: center; } .logo { - height: 70px; - margin-bottom: 20px; + height: 14vw; } @media screen and (max-width: 475px) { - .logo { - display: none; - } + } .welcome-heading { font-size: 8vw; @@ -199,7 +209,6 @@ let showSettings = false; } .btn-container { - flex: 0 0 60%; display: flex; flex-direction: column; justify-content: initial; @@ -224,7 +233,12 @@ let showSettings = false; transition: all 0.3s ease; box-shadow: 0 0 20px rgba(255, 145, 77, 0.8); /* Glowing shadow effect based on #ff914d */ } - + .logo-header{ + display: flex; + justify-content: flex-start; + width: 100vw; + margin-left: 9vw; + } .btn:hover { box-shadow: 0 0 20px rgba(255, 153, 0, 1), 0 0 40px rgba(255, 153, 0, 0.5); /* Stronger glow on hover */ transform: scale(1.1); diff --git a/webviews/components/KeployHome.svelte b/webviews/components/KeployHome.svelte index e8fd1a1..c4896c4 100644 --- a/webviews/components/KeployHome.svelte +++ b/webviews/components/KeployHome.svelte @@ -177,70 +177,43 @@
-

Running integration tests

{selectedIconButton}

- +
-
- - - + + +
+ + + + + + + +
+
{#if selectedIconButton === 3} @@ -315,8 +290,6 @@ - -
@@ -336,22 +309,8 @@ id="startRecordingButton" bind:this={startRecordingButton} > -
- -
+ +
Record Test Cases
Replay Test Cases
+
+ + +
{#if showSteps} @@ -388,8 +351,29 @@ 1. Setup Configuration + : 'InactiveStep'} "> + Setup Configuration + + + + + + + + + + + + + + + + + + + + +
@@ -401,15 +385,30 @@ 2. Record Test + : 'InactiveStep'}"> + Record Test + + + + + + + +
3. Replay Test + > + Replay Test + + + + + + +
@@ -422,15 +421,36 @@ 4. CI/CD setup + : 'InactiveStep'}" on:click={handleStepClick(currentStep)}> + CI/CD setup + + + + + + + + + + +
5. Add users + > + Add users + + + + + + + + + +
@@ -468,7 +488,6 @@ } .container { - padding: 16px; height: 100vh; background-color: black; display: flex; @@ -506,21 +525,26 @@ height: 100%; padding: 2rem; background-color: black; - border: 2px solid #f77b3e; + border: 1px solid #f77b3e; border-radius: 5px; transition: all 0.3s ease; - box-shadow: 0 0 20px rgba(247, 123, 62, 0.7); + box-shadow: inset 0px 4px 36px 1px rgba(255, 145, 77, 0.8), + inset 0px 4px 4px 0px rgba(255, 153, 0, 0.8); } .icon-buttons { - display: flex; - flex-direction: row; - align-items: start; - padding: 5px; - width: 100%; /* Full width of the container */ - justify-content: flex-start; /* Align icons to the left */ - } - + display: flex; + flex-direction: row; + align-items: start; + padding: 5vw; + width: 100%; /* Full width of the container */ + justify-content: flex-end; /* Align icons to the left */ + } + .header-button{ + display:flex; + justify-content: space-between; + width: -webkit-fill-available; + } .icon-button { display: flex; justify-content: start; @@ -543,13 +567,13 @@ } .header h1 { - font-size: 24px; + font-size: 30px; margin: 0; + font-weight: normal; } .section { margin-bottom: 32px; - width: 70%; } .highlight { @@ -570,9 +594,13 @@ text-align: center; display: none; } - #viewCompleteSummaryButton, - #viewTestLogsButton, - #viewRecordLogsButton { + .log-buttons-container { + display: flex; + justify-content: space-between; /* Space between the buttons */ + gap: 10px; /* Adjust gap between buttons */ + margin-top: 20px; /* Optional margin for spacing */ +} + #viewCompleteSummaryButton { display: none; width: 100%; margin: 10px auto; @@ -582,12 +610,25 @@ background-color: black; color: white; - border: 2px solid #f77b3e; + border: 1px solid #f77b3e; border-radius: 5px; transition: all 0.3s ease; box-shadow: 0 0 20px rgba(247, 123, 62, 0.7); cursor: pointer; } + #viewTestLogsButton, +#viewRecordLogsButton { + display: none; + width: auto; + padding: 13px; + background-color: black; + color: white; + border: 1px solid #f77b3e; + border-radius: 5px; + box-shadow: 0 0 20px rgba(247, 123, 62, 0.7); + cursor: pointer; + font-size: 13px; +} #recordStatus { display: none; text-align: center; @@ -610,8 +651,6 @@ /* Back Button Style */ .back-button { - margin-top: 20px; - padding: 10px 20px; background-color: black; color: white; border: none; @@ -626,11 +665,11 @@ display: flex; align-items: center; justify-content: space-between; - padding: 16px; - margin-bottom: 16px; + padding: 12px; + margin-bottom: 24px; background-color: black; color: white; - border: 2px solid #f77b3e; + border: 1px solid #f77b3e; border-radius: 5px; transition: all 0.3s ease; box-shadow: 0 0 20px rgba(247, 123, 62, 0.7); @@ -641,8 +680,8 @@ display: flex; align-items: center; font-size: 24px; - height: 35px; - width: 35px; + height: 25px; + width: 25px; margin-right: 16px; color: white; @@ -666,7 +705,10 @@ padding-bottom: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } - + .step-recording, + .step-testing{ + margin-bottom: 14px; + } /* .step { margin-bottom: 8px; } */ @@ -709,10 +751,6 @@ text-align: start; } - .container { - padding: 16px; - } - .header { display: flex; justify-content: center; @@ -775,23 +813,20 @@ .step-number.bottom { top: 2.5rem; /* Adjust to position text below the circle */ } + .step:nth-of-type(5) .step-number.activeStep:hover, + .step:nth-of-type(6) .step-number.activeStep:hover { + font-size: 1rem; /* Increase the font size */ + transition: font-size 0.3s ease; /* Smooth transition for the font size */ + cursor: pointer; /* Show pointer cursor to indicate it is clickable */ + } .step-circle { - width: 2rem; height: 2rem; - border-radius: 50%; background-color: black; position: relative; z-index: 3; } - .step-circle.active { - border: 2px solid #ff914d; - } - - .step-circle.inactive { - border: 2px solid #969390; - } .step-circle.active::before { content: ""; @@ -840,4 +875,86 @@ top: 0; left: 100%; } + +@media screen and (max-width: 480px) { + /* Main container responsiveness for mobile devices */ + + .header h1 { + font-size: 6vw; /* Responsive font size for heading */ + } + #recordStatus{ + font-size: 4vw; + } + .info{ + font-size: 2vw; + } + /* Card text and button responsiveness for mobile */ + .card { + padding: 3vw; + width: 65vw; + } + .log-buttons-container { + width: 65vw; + } + #viewTestLogsButton, + #viewRecordLogsButton { + font-size:3vw ; + } + .card-icon { + height: 5vw; /* Responsive size for icons */ + width: 5vw; + } + + .card-text { + font-size: 4vw; /* Responsive font size */ + } + .steps { + font-size: 3vw; + } + .step-recording, + .step-testing{ + margin-bottom: 3vw; + } + /* Steps styling for mobile */ + + /* Adjust circle sizes for mobile */ + .step-circle { + height: 6vw; /* Responsive step circle size */ + width: 6vw; + } + + .step-circle.active::before, + .step-circle.inactive::before { + width: 3vw; /* Inner circle size */ + height: 3vw; + } +} +.text { + display: inline; /* Show text */ +} + +.timeline-icon { + display: none; /* Hide icon */ +} + +/* When screen width is less than or equal to 480px */ +@media screen and (max-width: 480px) { + .text { + display: none; /* Hide text */ + } + .timeline-icon { + display: inline-block; + width: 20px; + height: 20px; + transition: color 0.3s ease; +} + .activeStep .timeline-icon { + color: white; /* Set to white when active */ +} + +.InactiveStep .timeline-icon { + color: grey; /* Set to grey when inactive */ +} + +} diff --git a/webviews/components/UtgDocs.svelte b/webviews/components/UtgDocs.svelte index b48dc85..ccd518a 100644 --- a/webviews/components/UtgDocs.svelte +++ b/webviews/components/UtgDocs.svelte @@ -93,8 +93,7 @@ }); -
-

Steps to Setup UTG

+