Merge pull request #7 from Onboardbase/newdesign

fixed mobile style
Onboardbase · Oct 15, 2024 · c2624ea · c2624ea
2 parents 15fd7b7 + 6abf9f3
commit c2624ea
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 119 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "my-test-app",
+  "name": "securelog-rsc-test-app",
   "version": "1.0.0",
   "description": "A simple app to test SecureLogContainer",
   "main": "src/index.tsx",

diff --git a/src/App.tsx b/src/App.tsx
@@ -50,20 +50,20 @@ export const HomeComponent = (props: any) => {
         handleSecretsFound(result);
       }}
     >
-      <div className="text-gray-400 mb-6 border border-dashed border-gray-500/25 rounded-lg p-4 break-words break-all">
+      <div className="text-gray-400 mb-6 border border-dashed border-gray-500/25 rounded-lg p-3 break-words break-all">
         This is a test anthropic secret
         <span className="text-[#F5BE58] ml-2">
         sk-ant-api03-ha5kz3GnNTiS9ScbDD0Xuf1BAleGb8Xj8wMZnTZYaioVPtxPV6wcBPYtCKYor2z8JE1gQ6sUXBj0enoln2wjuQ-lI7F-wAA{" "}
         </span>
       </div>
       <ol
-				className="list-inside list-decimal text-sm text-center sm:text-left text-gray-400 my-5 space-y-3"
+				className="list-inside list-decimal text-sm text-left text-gray-400 my-5 space-y-3"
 			>
 				<li>Secret masking is enabled for this secret hence why you can't see the
         secret value.</li>
 				<li>
         This test app sends any secret found to an API that sends the
-        secret to our <span className="text-white">public slack securelog-exam channel</span>. This is just an example of a good
+        secret to our public slack <span className="text-white"> securelog-rsc-notifications channel</span>. This is just an example of a good
         usecase for this component message.
         </li>
         <li>Join us on <a href="#https://join.slack.com/t/onboardbase-community/shared_invite/zt-1hqckrw8l-~RjaGExoczIk7e0X_4ZiWw" className="text-[#F5BE58]" target="_blank">slack</a>.</li>
@@ -74,7 +74,7 @@ export const HomeComponent = (props: any) => {
 
 const App = () => (
   <div className="relative flex flex-col p-8 sm:p-20">
-    <h1 className="text-3xl font-semibold mb-6">Securelog React Component</h1>
+    <h1 className="text-3xl font-semibold mb-6">Securelog RSC Test</h1>
     <HomeComponent />
     <div className="text-gray-400 mt-10">
       <a

diff --git a/src/output.css b/src/output.css
@@ -772,18 +772,10 @@ select {
   margin-bottom: 1.5rem;
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
 
-.ml-5 {
-  margin-left: 1.25rem;
-}
-
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -792,27 +784,11 @@ select {
   display: flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .size-4 {
   width: 1rem;
   height: 1rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
-.h-16 {
-  height: 4rem;
-}
-
-.w-16 {
-  width: 4rem;
-}
-
 .max-w-xl {
   max-width: 36rem;
 }
@@ -833,28 +809,10 @@ select {
   align-items: center;
 }
 
-.justify-center {
-  justify-content: center;
-}
-
-.justify-items-center {
-  justify-items: center;
-}
-
-.gap-16 {
-  gap: 4rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -881,10 +839,6 @@ select {
   border-style: dashed;
 }
 
-.border-gray-500\/20 {
-  border-color: rgb(107 114 128 / 0.2);
-}
-
 .border-gray-500\/25 {
   border-color: rgb(107 114 128 / 0.25);
 }
@@ -894,98 +848,45 @@ select {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.object-cover {
-  -o-object-fit: cover;
-     object-fit: cover;
-}
-
-.object-center {
-  -o-object-position: center;
-     object-position: center;
-}
-
-.p-20 {
-  padding: 5rem;
-}
-
-.p-14 {
-  padding: 3.5rem;
+.p-3 {
+  padding: 0.75rem;
 }
 
 .p-8 {
   padding: 2rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
-.pb-20 {
-  padding-bottom: 5rem;
+.text-left {
+  text-align: left;
 }
 
-.text-center {
-  text-align: center;
-}
-
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-semibold {
   font-weight: 600;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
-.leading-9 {
-  line-height: 2.25rem;
-}
-
-.text-white {
+.text-\[\#F5BE58\] {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(245 190 88 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.text-\[\#F5BE58\] {
-  --tw-text-opacity: 1;
-  color: rgb(245 190 88 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .hover\:underline:hover {
@@ -996,8 +897,4 @@ select {
   .sm\:p-20 {
     padding: 5rem;
   }
-
-  .sm\:text-left {
-    text-align: left;
-  }
 }