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 a69af69..0000000 Binary files a/sidebar/settings.png and /dev/null differ diff --git a/sidebar/settings.svg b/sidebar/settings.svg new file mode 100644 index 0000000..c299869 --- /dev/null +++ b/sidebar/settings.svg @@ -0,0 +1,7 @@ + + + + + + + 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

+