Merge pull request #851 from supertokens/fix/text-issue

Author: rishabhpoddar

v2/src/components/appInfoForm/index.tsx

@@ -578,9 +578,7 @@ export default class AppInfoForm extends React.PureComponent<PropsWithChildren<P
                                     marginRight: "10px"
                                 }}
                             />
-                            <span style={{
-                                color: 'white !important'
-                            }}>
+                            <span className="nextjs-api-route-text">
                                 I am using NextJS' <a target="_blank" rel="nofollow noopener noreferrer" href="https://nextjs.org/docs/api-routes/introduction">API route</a>
                             </span>
                         </label>

v2/src/components/appInfoForm/style.css

@@ -5,12 +5,12 @@
   padding: 1rem;
   margin-bottom: 1.25rem;
   color: #ffffff;
-  background: #2A2A2A;
+  background: #2a2a2a;
   border: 0.0625rem solid #404040;
 }
 
 .app-info-form-container {
-  background: #2A2A2A;
+  background: #2a2a2a;
   border: 0.0625rem solid #404040;
   color: white;
   border-radius: 0.375rem;
@@ -77,7 +77,7 @@
   font-size: 0.875rem;
   border: 0.0625rem solid #404040;
   pointer-events: none;
-  transition: opacity .2s ease-out, transform .2s ease-out;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
   opacity: 0;
 }
 
@@ -90,8 +90,9 @@
   transform: translateX(-50%) translateY(0rem);
 }
 
-.app-info-form-explanation::before, .app-info-form-explanation::after {
-  content: "";
+.app-info-form-explanation::before,
+.app-info-form-explanation::after {
+  content: '';
   display: block;
   background-color: #363636;
   position: absolute;
@@ -163,24 +164,26 @@
   color: rgb(255, 255, 255);
   box-shadow: 0px 0px 0px 0px transparent;
   outline: none;
-  transition: border .15s, box-shadow .15s;
+  transition: border 0.15s, box-shadow 0.15s;
   padding: 8px 20px;
   font-family: Roboto;
 }
 
-.app-info-form-field-input:focus {  
+.app-info-form-field-input:focus {
   border-color: rgb(255, 153, 51);
   box-shadow: 0px 0px 3px 1px rgb(255, 153, 51, 0.8);
 }
 
-.app-info-form-field-input::placeholder, .app-info-form-field-input:-ms-input-placeholder, .app-info-form-field-input::-ms-input-placeholder {
+.app-info-form-field-input::placeholder,
+.app-info-form-field-input:-ms-input-placeholder,
+.app-info-form-field-input::-ms-input-placeholder {
   color: rgb(90, 90, 90);
 }
 
 input.app-info-form-field-input:focus::placeholder {
   color: transparent;
 }
-.app-info-form-field-input:focus:-ms-input-placeholder{
+.app-info-form-field-input:focus:-ms-input-placeholder {
   color: transparent;
 }
 .app-info-form-field-input:focus::-ms-input-placeholder {
@@ -199,7 +202,7 @@ input.app-info-form-field-input:focus::placeholder {
   }
 
   .app-info-form-question .app-info-form-label {
-    margin-bottom: .3125rem;
+    margin-bottom: 0.3125rem;
     margin-right: 0rem;
   }
 
@@ -210,4 +213,7 @@ input.app-info-form-field-input:focus::placeholder {
   .app-info-form-field-container {
     max-width: 100%;
   }
-}
+}
+span.nextjs-api-route-text {
+  color: white !important;
+}