Ryan styling scenarios (#50)

* Attributes can be added dynamically

* .

* first commit

* inputs change the data, attribues and credentials can be added.

* changing things to new inputs

* .

* redid cred page

* .

* recent work.

* fixed editing and adding credentials.

* updated credential component. removed edit, moved delete functionality.

* fixed styling and added select logic

* fixed all bugs. ready for testing

* .

* fixed reset json button.

* small change

* removed extra files from testing new components.

* cleaned up all files, renamed files to appropriate names.

* lifted state up from CredentialsScreen into App. Credential JSON is now accessible through whole app.

* removed extra

* deleted duplicate

* fixed import changes after changing file names.

* first commit on new branch.

* added proof request component

* .

* .

* testing new stuff with nesting.

* testing

* .

* .

* made a few changes to work with the updated json format.

* bug fixing

* removed extra file

* Updated to use default json, some changes to functionality--nothing is updated until the user presses add or done

* fixed all known bugs and added attribute functionality.

* removed SetupPage as its been renamed.

* removed console.logs

* changing styles

* styling changes

* .

* small bug fix

* updated styling on character, credentials, and onboarding screens.

* style changes

* changed button styles and their placement on credentials and onboarding screen

* more styling changes

* .

* styles updated across the app

* uncommented state variable line

* fixing merge conflicts

* moved componentToMount state var to CredentialsScreen

* attribute input text is now truncated

* removed extra files

* added bold to labels

* made label text md instead of lg

* added styled footer to credentials page

* added footer to character and onboarding screens

* testing overview component

* removed old variables

* .

* added image crashing fix

* changed footer color

* removed extra files and fixed a small bug on credentials screen

* updated all screens except for scenarios to use darkmode.

* small change on hovers

* changed layout from 50/50 to 40/60

* removed character info screen. Page now goes straight to edit.

* reverted changes. cancel/save functionality gets lost.

* updated styling for cancel and save buttons

* added borders to inputs

* adjusted borders on inputs and items (credentials, steps)

* updated hover effects for both modes.

* added comments to all credentials components

* Credentials is now rendered using  the CredentialPage.jsx page

* fixed modal styling and added a JSONPreview component (if needed)

* fixed dark and light mode background colors on CharacterInfo

* Added a check to remove the trash icon if there is only one credential

* updated Add Step bottom at the bottom to match

* adjusted size of toggle button

* updated styles across scenario page.

---------

Co-authored-by: David Krismer <david.krismer71@gmail.com>

Author: boadoryan

src/react-modules/DarkModeToggle.js

@@ -10,12 +10,12 @@ function DarkModeToggle({ darkMode, setDarkMode }) {
       <div className="">
         <button onClick={toggleDarkMode} className="w-12">
           <div
-            className={` rounded-full p-1 transition-all ${
+            className={` rounded-full p-1 transition-all border-2 w-16 ${
               darkMode ? "bg-dark-bg" : "bg-light-bg"
             }`}
           >
             {darkMode ? (
-              <SunIcon className="h-6 w-6 text-yellow-300  ml-4" />
+              <SunIcon className="h-6 w-6 text-yellow-300  ml-8" />
             ) : (
               <MoonIcon className="h-6 w-6 text-gray-700" />
             )}

src/react-modules/character-screen/CharacterScreen.js

@@ -65,7 +65,7 @@ function CharacterScreen({
                 </div>
               </div>
 
-              <div className="mt-8">
+              {/* <div className="mt-8">
                 <div className="flex justify-between mb-4">
                   <h3 className="text-xl font-bold">Your Character:</h3>
                 </div>
@@ -77,7 +77,7 @@ function CharacterScreen({
                   selectedCharacter={selectedCharacter}
                   setSelectedCharacter={setSelectedCharacter}
                 />
-              </div>
+              </div> */}
             </div>
             {/* end of column 1  */}
 

src/react-modules/onboarding-screen/IssueStepEdit.jsx

@@ -111,7 +111,7 @@ function IssueStepEdit({
           </label>
           <br />
           <input
-            className="dark:text-dark-text dark:bg-dark-input mt-2 bg-light-bg border dark:border-dark-border "
+            className="dark:text-dark-text dark:bg-dark-input mt-2"
             id={`${selectedStep}_title`}
             type="text"
             value={localJSON.title}
@@ -126,7 +126,7 @@ function IssueStepEdit({
             {"Page Description"}
           </label>
           <textarea
-            className="dark:text-dark-text dark:bg-dark-input p-2 w-full rounded resize-none mt-3 bg-light-bg border dark:border-dark-border "
+            className="dark:text-dark-text dark:bg-dark-input p-2 w-full rounded resize-none mt-3"
             rows="8"
             id={`${selectedStep}_text`}
             placeholder="Page Description"
@@ -155,7 +155,7 @@ function IssueStepEdit({
             <div className="flex flex-row justify-center items-center my-4">
               <div className="relative w-full">
                 <input
-                  className="dark:text-dark-text dark:bg-dark-input border dark:border-dark-border  rounded pl-2 pr-10 mb-2 w-full bg-light-bg"
+                  className="dark:text-dark-text dark:bg-dark-input rounded pl-2 pr-10 mb-2 w-full"
                   placeholder="ex. Student Card"
                   type="text"
                   onChange={(e) => searchCredential(e)}
@@ -194,8 +194,8 @@ function IssueStepEdit({
 
           <input
             type="submit"
-            value="SAVE"
-            className="p-1 w-20 hover:bg-light-btn-hover border  dark:hover:bg-dark-btn-hover hover:cursor-pointer"
+            value="Save"
+            className="p-1 w-20 button-dark hover:bg-neutral-600"
           />
         </div>
       </form>