MarketDetails Page Upgrade to Tailwind in Line with BLK Theme

[pwdel]

[pwdel]

My first attempt methodology:

1. Find the button or thing that I would like to add from the styleguide page here: https://demos.creative-tim.com/blk-design-system/index.html
2. Search for the element in the CSS here: https://github.com/creativetimofficial/blk-design-system-react/blob/master/src/assets/css/blk-design-system-react.css
3. Ask ChatGPT to replicate it.
4. Replaced buttons using new style.

Result:

OK, so some questions I have are:

1. Is there any way we can start out with a central, "style" document where we would hold something like this:

      <button
        className={`px-4 py-2 text-white border border-transparent rounded focus:outline-none focus:ring-2 focus:ring-offset-2 ${selectedResolution === 'YES' ? 'bg-green-400 hover:bg-green-300 focus:ring-green-300' : 'bg-green-500 hover:bg-green-400 focus:ring-green-400'}`}
        style={{
          boxShadow: '0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)',
          backgroundColor: selectedResolution === 'YES' ? '#00cca4' : '#00f2c3',
          borderColor: selectedResolution === 'YES' ? '#00bf9a' : '#00f2c3'
        }}
        onMouseEnter={(e) => {
          e.target.style.backgroundColor = selectedResolution === 'YES' ? '#00bf9a' : '#00cca4';
          e.target.style.borderColor = selectedResolution === 'YES' ? '#00b290' : '#00bf9a';
        }}
        onMouseLeave={(e) => {
          e.target.style.backgroundColor = selectedResolution === 'YES' ? '#00cca4' : '#00f2c3';
          e.target.style.borderColor = selectedResolution === 'YES' ? '#00bf9a' : '#00f2c3';
        }}
        onClick={() => setSelectedResolution('YES')}
      >
   

And then, just name it something like, "YESBUTTON" ... so that we don't have to dump that entire huge thing of code on the same page? Alternatively, do we save these as components so we can use them repeatedly over time? Should really one of our first tickets be, "Create component elements" which then get later get added into the pages we are trying to rebuild...?

Sorry if this is what you were proposing earlier.