css classes renamed

midudev · Nov 1, 2022 · 0bc435e · 0bc435e
1 parent c6db176
commit 0bc435e
Show file tree

Hide file tree

Showing 20 changed files with 73 additions and 73 deletions.
diff --git a/src/components/LcsGrz/Components/AboutMe/AboutMe.css b/src/components/LcsGrz/Components/AboutMe/AboutMe.css
@@ -1,4 +1,4 @@
-.lg-am-container {
+.lcsgrz-am-container {
  display: flex;
  flex-direction: row;
  align-items: center;

diff --git a/src/components/LcsGrz/Components/AboutMe/AboutMe.jsx b/src/components/LcsGrz/Components/AboutMe/AboutMe.jsx
@@ -29,7 +29,7 @@ export default function AboutMe() {
  }
 
  return (
- <div className='lg-am-container'>
+ <div className='lcsgrz-am-container'>
  <Email size={iconSize} color={iconColor} onClick={sendEmail} />
  <Divider width={dividerWidth} />
  <Linkedin
@@ -38,7 +38,7 @@ export default function AboutMe() {
  onClick={openInNewTab('https://www.linkedin.com/in/lcsgrz/')}
  />
  <Divider width={dividerWidth} />
- <label className='lg-am-label'>LCSGRZ</label>
+ <label className='lcsgrz-am-label'>LCSGRZ</label>
  <Divider width={dividerWidth} />
  <Github
  size={iconSize}

diff --git a/src/components/LcsGrz/Components/AboutMe/Media/Email.jsx b/src/components/LcsGrz/Components/AboutMe/Media/Email.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-ab-media'
+ className='lcsgrz-ab-media'
  version='1.1'
  viewBox='0 0 41 40'
  xmlns='http:https://www.w3.org/2000/svg'

diff --git a/src/components/LcsGrz/Components/AboutMe/Media/Github.jsx b/src/components/LcsGrz/Components/AboutMe/Media/Github.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-ab-media'
+ className='lcsgrz-ab-media'
  version='1.1'
  viewBox='0 0 16 16'
  xmlns='http:https://www.w3.org/2000/svg'

diff --git a/src/components/LcsGrz/Components/AboutMe/Media/Instagram.jsx b/src/components/LcsGrz/Components/AboutMe/Media/Instagram.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-ab-media'
+ className='lcsgrz-ab-media'
  version='1.1'
  viewBox='0 0 19.2 19.2'
  xmlns='http:https://www.w3.org/2000/svg'

diff --git a/src/components/LcsGrz/Components/AboutMe/Media/Linkedin.jsx b/src/components/LcsGrz/Components/AboutMe/Media/Linkedin.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-ab-media'
+ className='lcsgrz-ab-media'
  xmlns='http:https://www.w3.org/2000/svg'
  viewBox='0 0 50 50'
  width={size}

diff --git a/src/components/LcsGrz/Components/AboutMe/Media/Media.css b/src/components/LcsGrz/Components/AboutMe/Media/Media.css
@@ -1,3 +1,3 @@
-.lg-ab-media {
+.lcsgrz-ab-media {
  cursor: pointer;
 }
diff --git a/src/components/LcsGrz/Components/CheckBox/CheckBox.css b/src/components/LcsGrz/Components/CheckBox/CheckBox.css
@@ -1,4 +1,4 @@
-.lg-cb-container-checked {
+.lcsgrz-cb-container-checked {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -12,7 +12,7 @@
  border-color: #7b32d9;
 }
 
-.lg-cb-container-unchecked {
+.lcsgrz-cb-container-unchecked {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -26,14 +26,14 @@
  background-color: #7a32d932;
 }
 
-.lg-cb-label-box {
+.lcsgrz-cb-label-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
 }
 
-.lg-cb-hint {
+.lcsgrz-cb-hint {
  font-size: 11px;
  pointer-events: none;
 }
diff --git a/src/components/LcsGrz/Components/CheckBox/CheckBox.jsx b/src/components/LcsGrz/Components/CheckBox/CheckBox.jsx
@@ -12,16 +12,16 @@ import './CheckBox.css'
 export default function CheckBox({ name, label, hint, onChange, isChecked, disabled }) {
  return (
  <button
- className={isChecked ? 'lg-cb-container-checked' : 'lg-cb-container-unchecked'}
+ className={isChecked ? 'lcsgrz-cb-container-checked' : 'lcsgrz-cb-container-unchecked'}
  type='button'
  onClick={onChange}
  disabled={disabled}
  name={name}
  >
- <div className='lg-cb-label-box'>
+ <div className='lcsgrz-cb-label-box'>
  <label>{label}</label>
  <Divider width={10} />
- <label className='lg-cb-hint'>{hint}</label>
+ <label className='lcsgrz-cb-hint'>{hint}</label>
  </div>
  {isChecked && <CheckMark size={15} color='white' />}
  </button>

diff --git a/src/components/LcsGrz/Components/PasswordBox/Media/CopyIcon.jsx b/src/components/LcsGrz/Components/PasswordBox/Media/CopyIcon.jsx
@@ -6,9 +6,9 @@ import './Media.css'
 // ─────────────── ∞ ───────────────
 
 export default ({ onClick, size, color }) => (
- <div className='lg-pb-button' onClick={onClick}>
+ <div className='lcsgrz-pb-button' onClick={onClick}>
  <svg
- className='lg-pb-button-svg'
+ className='lcsgrz-pb-button-svg'
  xmlns='http:https://www.w3.org/2000/svg'
  viewBox='0 0 115.77 122.88'
  width={size}

diff --git a/src/components/LcsGrz/Components/PasswordBox/Media/HiddenIcon.jsx b/src/components/LcsGrz/Components/PasswordBox/Media/HiddenIcon.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-pb-media'
+ className='lcsgrz-pb-media'
  xmlns='http:https://www.w3.org/2000/svg'
  viewBox='0 0 122.88 53.37'
  width={size}

diff --git a/src/components/LcsGrz/Components/PasswordBox/Media/Media.css b/src/components/LcsGrz/Components/PasswordBox/Media/Media.css
@@ -1,13 +1,13 @@
-.lg-pb-media {
+.lcsgrz-pb-media {
  cursor: pointer;
 }
 
-.lg-pb-button-svg {
+.lcsgrz-pb-button-svg {
  cursor: pointer;
  pointer-events: none;
 }
 
-.lg-pb-button {
+.lcsgrz-pb-button {
  background-color: #7b32d9;
  cursor: pointer;
  height: 64px;

diff --git a/src/components/LcsGrz/Components/PasswordBox/Media/ReloadIcon.jsx b/src/components/LcsGrz/Components/PasswordBox/Media/ReloadIcon.jsx
@@ -6,9 +6,9 @@ import './Media.css'
 // ─────────────── ∞ ───────────────
 
 export default ({ onClick, size, color }) => (
- <div className='lg-pb-button' onClick={onClick}>
+ <div className='lcsgrz-pb-button' onClick={onClick}>
  <svg
- className='lg-pb-button-svg'
+ className='lcsgrz-pb-button-svg'
  xmlns='http:https://www.w3.org/2000/svg'
  viewBox='0 0 112.62 120.72'
  width={size}

diff --git a/src/components/LcsGrz/Components/PasswordBox/Media/VisibleIcon.jsx b/src/components/LcsGrz/Components/PasswordBox/Media/VisibleIcon.jsx
@@ -7,7 +7,7 @@ import './Media.css'
 
 export default ({ onClick, size, color }) => (
  <svg
- className='lg-pb-media'
+ className='lcsgrz-pb-media'
  xmlns='http:https://www.w3.org/2000/svg'
  viewBox='0 0 122.88 68.18'
  width={size}

diff --git a/src/components/LcsGrz/Components/PasswordBox/PasswordBox.css b/src/components/LcsGrz/Components/PasswordBox/PasswordBox.css
@@ -1,24 +1,24 @@
-.lg-pb-container {
+.lcsgrz-pb-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  padding: 20px 0;
 }
 
-.lg-pb-input {
+.lcsgrz-pb-input {
  display: flex;
  flex: 1;
  font-size: 26px;
  font-weight: bold;
  background-color: transparent;
 }
 
-.lg-pb-input:focus {
+.lcsgrz-pb-input:focus {
  outline: none;
 }
 
-.lg-pb-passbox {
+.lcsgrz-pb-passbox {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -32,36 +32,36 @@
  color: white;
 }
 
-.lg-pb-divider {
+.lcsgrz-pb-divider {
  height: 36px;
  width: 3px;
  background-color: #7b32d9;
  margin: 0 24px;
  border-radius: 4px;
 }
 
-.lg-pb-copy-box {
+.lcsgrz-pb-copy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 
-.lg-pb-copied-label {
+.lcsgrz-pb-copied-label {
  margin-top: 8px;
  color: white;
  font-size: 10px;
  font-weight: bold;
 }
 
-.lg-pb-pass-container {
+.lcsgrz-pb-pass-container {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
 }
 
-.lg-pb-passlevel-box {
+.lcsgrz-pb-passlevel-box {
  margin-top: 8px;
  display: flex;
  flex: 1;
@@ -74,14 +74,14 @@
  width: 100%;
 }
 
-.lg-pb-level-container {
+.lcsgrz-pb-level-container {
  height: 10px;
  width: 50%;
  border-radius: 5px;
  background-color: #7a32d932;
 }
 
-.lg-pb-level {
+.lcsgrz-pb-level {
  height: 100%;
  border-radius: 5px;
  background-color: #7b32d9;

diff --git a/src/components/LcsGrz/Components/PasswordBox/PasswordBox.jsx b/src/components/LcsGrz/Components/PasswordBox/PasswordBox.jsx
@@ -31,33 +31,33 @@ export default function PasswordBox({ password, entropy, onCreate }) {
  const passLevel = convertToLevel(entropy)
 
  return (
- <div className='lg-pb-container'>
- <div className='lg-pb-pass-container'>
- <div className='lg-pb-passbox'>
+ <div className='lcsgrz-pb-container'>
+ <div className='lcsgrz-pb-pass-container'>
+ <div className='lcsgrz-pb-passbox'>
  <input
- className='lg-pb-input'
+ className='lcsgrz-pb-input'
  type={showPass ? 'text' : 'password'}
  value={password}
  readOnly
  />
- <div className='lg-pb-divider' />
+ <div className='lcsgrz-pb-divider' />
  {showPass && <HiddenIcon color='white' size={32} onClick={changeVisibility} />}
  {!showPass && <VisibleIcon color='white' size={32} onClick={changeVisibility} />}
  </div>
- <div className='lg-pb-passlevel-box'>
+ <div className='lcsgrz-pb-passlevel-box'>
  PASSWORD LEVEL
  <Divider width={30} />
- <div className='lg-pb-level-container'>
- <div className='lg-pb-level' style={{ width: `${passLevel.level * 10}%` }} />
+ <div className='lcsgrz-pb-level-container'>
+ <div className='lcsgrz-pb-level' style={{ width: `${passLevel.level * 10}%` }} />
  </div>
  <Divider width={30} />
  {passLevel.label.toLocaleUpperCase()}
  </div>
  </div>
  <Divider width={20} />
- <div className='lg-pb-copy-box'>
+ <div className='lcsgrz-pb-copy-box'>
  <CopyIcon color='white' size={28} onClick={copyToClipboard} />
- {showCopiedLabel && <label className='lg-pb-copied-label'>COPIED</label>}
+ {showCopiedLabel && <label className='lcsgrz-pb-copied-label'>COPIED</label>}
  </div>
  <Divider width={20} />
  <ReloadIcon color='white' size={28} onClick={onCreate} />

diff --git a/src/components/LcsGrz/Components/Range/Range.css b/src/components/LcsGrz/Components/Range/Range.css
@@ -1,4 +1,4 @@
-.lg-r-container {
+.lcsgrz-r-container {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -8,7 +8,7 @@
  padding: 0 12px;
 }
 
-.lg-range {
+.lcsgrz-range {
  flex-grow: 1;
  appearance: none;
  height: 5px;
@@ -18,7 +18,7 @@
  background-color: #7a32d976;
 }
 
-.lg-range::-ms-thumb {
+.lcsgrz-range::-ms-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
@@ -29,7 +29,7 @@
  transition: background 0.3s ease-in-out;
 }
 
-.lg-range::-webkit-slider-thumb {
+.lcsgrz-range::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
@@ -40,7 +40,7 @@
  transition: background 0.3s ease-in-out;
 }
 
-.lg-range::-moz-range-thumb {
+.lcsgrz-range::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;

diff --git a/src/components/LcsGrz/Components/Range/Range.jsx b/src/components/LcsGrz/Components/Range/Range.jsx
@@ -9,11 +9,11 @@ import './Range.css'
 
 export default function Range({ name, label, min, max, onChange, value }) {
  return (
- <div className='lg-r-container'>
+ <div className='lcsgrz-r-container'>
  <label>{label}</label>
  <Divider width={24} />
  <input
- className='lg-range'
+ className='lcsgrz-range'
  name={name}
  type='range'
  min={min}