switch styles

mishankov · Feb 22, 2024 · 5e10bb8 · 5e10bb8
1 parent f9dc63f
commit 5e10bb8
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 100 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,37 +1,10 @@
 html {
-  --bg-color-90: hsl(290, 9%, 10%);
-  --bg-color-100: hsl(290, 9%, 13%);
-  --bg-color-110: hsl(290, 9%, 16%);
-  --bg-color-120: hsl(290, 9%, 18%);
-  --text-color: hsl(30, 100%, 99%);
+  --bg-color-100: hsl(157, 100%, 90%);
+  --border-color-100: hsl(157, 100%, 10%);
 
-
-  --replace-bg-color: hsl(10, 52%, 53%);
-  --replace-border-color: hsl(10, 62%, 53%);
-
-  --prepend-bg-color: hsl(40, 52%, 53%);
-  --prepend-border-color: hsl(40, 52%, 53%);
-
-  --append-bg-color: hsl(70, 52%, 53%);
-  --append-border-color: hsl(70, 62%, 53%);
-
-  --splitGetFromIndex-bg-color: hsl(100, 52%, 53%);
-  --splitGetFromIndex-border-color: hsl(100, 62%, 53%);
-
-  --compose-bg-color: hsl(160, 52%, 53%);
-  --compose-border-color: hsl(160, 62%, 53%);
-
-  --slice-bg-color: hsl(190, 52%, 53%);
-  --slice-border-color: hsl(190, 62%, 53%);
-
-  --splitCompose-bg-color: hsl(220, 52%, 53%);
-  --splitCompose-border-color: hsl(220, 62%, 53%);
-
-  --splitJoin-bg-color: hsl(250, 52%, 53%);
-  --splitJoin-border-color: hsl(250, 62%, 53%);
+  --text-color: #000
 }
 
 body {
   background-color: var(--bg-color-100);
-  color: var(--text-color);
 }
diff --git a/src/components/TextArea.svelte b/src/components/TextArea.svelte
@@ -15,15 +15,15 @@
   textarea {
     height: 500px;
     width: 300px;
-    background-color: var(--bg-color-110);
+    /* background-color: #FFF; */
     color: var(--text-color);
     border-radius: 10px;
-    border: 1px solid var(--bg-color-90);
+    border: 1px solid var(--border-color-100);
     padding: 10px;
   }
 
   textarea:focus {
     outline: none;
-    background-color: var(--bg-color-120);
+    /* background-color: var(--bg-color-120); */
   }
 </style>
diff --git a/src/manipulations/components/Append.svelte b/src/manipulations/components/Append.svelte
@@ -11,13 +11,6 @@
   export let { suffix }: AppendManipulation = { suffix: "", type: "append"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Suffix </span><input bind:value={suffix} />
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--append-bg-color);
-    --manipulation-border-color: var(--append-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/Compose.svelte b/src/manipulations/components/Compose.svelte
@@ -12,13 +12,6 @@
   export let { pattern, placeholder }: ComposeManipulation = { pattern: "", placeholder: "{}", type: "compose"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Replace placeholder</span> <input bind:value={placeholder}> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--compose-bg-color);
-    --manipulation-border-color: var(--compose-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/Manipulation.svelte b/src/manipulations/components/Manipulation.svelte
@@ -34,7 +34,7 @@
   {:else if manipulation.type == "splitJoin"}
     <SplitJoin bind:splitString={manipulation.splitString} bind:joinString={manipulation.joinString} bind:innerManipulations={manipulation.innerManipulations}/>
   {/if}
-  <button class="delete" on:click={sendDeleteEvent}>x</button>
+  <button class="delete" on:click={sendDeleteEvent}>X</button>
 </div>
 
 <style>
@@ -43,33 +43,38 @@
     --manipulation-bg-color: grey;
     --manipulation-border-color: white;
 
-    padding: 10px;
-    background-color: var(--manipulation-bg-color);
-    border: 2px solid var(--manipulation-border-color);
-    border-radius: 10px;
+    
   }
 
   div {
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
+
+    padding: 10px;
+    background-color: #fff;
+    border: 2px solid var(--border-color-100);
+    border-radius: 10px;
   }
 
   .delete {
-    background-color: var(--bg-color-100);
+    background-color: #fff;
     color: var(--text-color);
     border: none;
     border-radius: 10px;
+    padding: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
   }
 
   .delete:hover {
     outline: none;
-    background-color: var(--bg-color-110);
+    border: 2px solid var(--border-color-100);
   }
 
   .delete:active {
     outline: none;
-    background-color: var(--bg-color-120);
+    background-color: var(--bg-color-100);
   }
 </style>
diff --git a/src/manipulations/components/Prepend.svelte b/src/manipulations/components/Prepend.svelte
@@ -11,13 +11,7 @@
   export let { prefix }: PrependManipulation = { prefix: "", type: "prepend"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Prefix </span><input bind:value={prefix} />
 </div>
 
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--prepend-bg-color);
-    --manipulation-border-color: var(--prepend-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/Replace.svelte b/src/manipulations/components/Replace.svelte
@@ -12,13 +12,6 @@
   export let { from, to }: ReplaceManipulation = {from: "", to: "", type: "replace"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Replace from</span> <input bind:value={from} /> <span>to</span> <input bind:value={to} />
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--replace-bg-color);
-    --manipulation-border-color: var(--replace-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/Slice.svelte b/src/manipulations/components/Slice.svelte
@@ -12,14 +12,6 @@
   export let { start, end }: SliceManipulation = { start: 0, end: -1, type: "slice"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Slice from</span> <input bind:value={start} type="number"/> <span>to</span> <input bind:value={end} type="number" /> 
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--slice-bg-color);
-    --manipulation-border-color: var(--slice-border-color);
-  }
-</style>
-
diff --git a/src/manipulations/components/SplitCompose.svelte b/src/manipulations/components/SplitCompose.svelte
@@ -13,13 +13,6 @@
   export let { splitString, pattern, placeholder }: SplitComposeManipulation = { splitString: ",", pattern: "{1}, {0}", placeholder: "{d}", type: "splitCompose"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Split by</span> <input bind:value={splitString}/> <span> and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--splitCompose-bg-color);
-    --manipulation-border-color: var(--splitCompose-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/SplitGetFromIndex.svelte b/src/manipulations/components/SplitGetFromIndex.svelte
@@ -12,13 +12,6 @@
   export let { splitString, index }: SplitGetFromIndexManipulation = {splitString: "", index: 0, type: "splitGetFromIndex"}
 </script>
 
-<div class="manipulation">
+<div>
   <span>Split by </span><input bind:value={splitString} /><span>, get from </span><input bind:value={index} />
 </div>
-
-<style>
-  .manipulation {
-    --manipulation-bg-color: var(--splitGetFromIndex-bg-color);
-    --manipulation-border-color: var(--splitGetFromIndex-border-color);
-  }
-</style>
diff --git a/src/manipulations/components/SplitJoin.svelte b/src/manipulations/components/SplitJoin.svelte
@@ -32,9 +32,6 @@
 
 <style>
   .manipulation {
-    --manipulation-bg-color: var(--splitJoin-bg-color);
-    --manipulation-border-color: var(--splitJoin-border-color);
-
     display: flex;
     flex-direction: column;
     gap: 10px;