Skip to content

Commit 9c77e3e

Browse files
committed
Remove bling from Bootstrap decor
1 parent fc26896 commit 9c77e3e

File tree

5 files changed

+50
-8
lines changed

5 files changed

+50
-8
lines changed

src/assets/styles.scss

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,28 @@ $black: $_black;
2929
$body-bg: $dark;
3030
$body-color: $light;
3131

32+
// Components
33+
// Define common padding and border radius sizes and more.
34+
// $line-height-lg: 1.5 !default;
35+
// $line-height-sm: 1.5 !default;
36+
// $border-width: 1px !default;
37+
// $border-color: $gray-300 !default;
38+
// $border-radius: .25rem !default;
39+
// $border-radius-lg: .3rem !default;
40+
// $border-radius-sm: .2rem !default;
41+
// $rounded-pill: 50rem !default;
42+
// $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
43+
// $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
44+
// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
45+
// $component-active-color: $white !default;
46+
// $component-active-bg: theme-color("primary") !default;
47+
// $caret-width: .3em !default;
48+
// $caret-vertical-align: $caret-width * .85 !default;
49+
// $caret-spacing: $caret-width * .85 !default;
50+
// $transition-base: all .2s ease-in-out !default;
51+
// $transition-fade: opacity .15s linear !default;
52+
// $transition-collapse: height .35s ease !default;
53+
3254
// Dropdowns
3355
$dropdown-padding-y: 0px;
3456
$dropdown-bg: $light;
@@ -98,6 +120,10 @@ $navbar-dark-toggler-border-color: $dark;
98120
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
99121

100122
// Custom App CSS
123+
textarea:focus {
124+
outline: none;
125+
}
126+
101127
.gd-nav-btn-icon {
102128
width: 20px;
103129
height: 16px;
@@ -107,7 +133,7 @@ $navbar-dark-toggler-border-color: $dark;
107133
font-size: x-large;
108134
}
109135

110-
.gd-textarea {
136+
.gd-textarea-container {
111137
height: calc(100vh - 139px);
112138
}
113139

src/components/Content.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ const noteConfig = () => {
1212
const config = getLocalStorage('gd-notes-config');
1313
return config.statusOK ? config.data : {
1414
fontSize: (config.data.fontSize ? config.data.fontSize : 24),
15-
lineWrapOn: true
15+
lineWrapOn: true,
16+
spellCheckOn: true
1617
};
1718
};
1819

1920
const Content = () => {
2021
const { noteTitle, noteContent, onNoteContentChange } = React.useContext(NoteContext);
2122
const [fontSize, setFontSize] = React.useState(noteConfig().fontSize || 24);
2223
const [lineWrapOn, setLineWrapOn] = React.useState(noteConfig().lineWrapOn);
24+
const [spellCheckOn, setSpellCheckOn] = React.useState(noteConfig().spellCheckOn);
2325
const noteHashRef = React.useRef(null);
2426

2527
// Effect to set instance ref of note hash key
@@ -42,14 +44,20 @@ const Content = () => {
4244
saveLocalStorage('gd-notes-config', { ...noteConfig(), lineWrapOn: !lineWrapOn });
4345
}
4446

47+
const onToggleSpellCheck = () => {
48+
setSpellCheckOn(!spellCheckOn);
49+
saveLocalStorage('gd-notes-config', { ...noteConfig(), spellCheckOn: !spellCheckOn });
50+
}
51+
4552
// console.log('Content: noteConfig...', noteConfig());
4653
// console.log('Content: noteHashRef.current...', noteHashRef.current);
4754

4855
return (
4956
<div className="container-fluid">
5057
<div className="h5 text-info">{noteTitle}</div>
51-
<div className="w-100 gd-textarea">
58+
<div className="w-100 gd-textarea-container">
5259
<textarea
60+
className="w-100 h-100 p-2 text-dark rounded-lg border-0"
5361
id='gd-note'
5462
style={lineWrapOn ? ({
5563
fontSize: fontSize,
@@ -61,8 +69,9 @@ const Content = () => {
6169
overflowWrap: 'normal',
6270
overflowX: 'auto'
6371
})}
64-
className="w-100 h-100 rounded-lg p-2 text-dark"
6572
placeholder="Start to type something..."
73+
spellCheck={spellCheckOn}
74+
maxLength="1000000"
6675
value={noteContent}
6776
onChange={(e) => { onNoteContentChange(e.target.value, noteHashRef.current) }}
6877
></textarea>
@@ -71,7 +80,9 @@ const Content = () => {
7180
noteLength={noteContent.length}
7281
fontSize={fontSize}
7382
lineWrapOn={lineWrapOn}
83+
spellCheckOn={spellCheckOn}
7484
onToggleLineWrap={onToggleLineWrap}
85+
onToggleSpellCheck={onToggleSpellCheck}
7586
onFontSizeChange={onFontSizeChange}
7687
/>
7788
</div>

src/components/Download.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const Download = () => {
5959
<p>Click Copy button below</p>
6060
))}
6161
<textarea
62-
className="text-monospace text-muted w-100 mb-2 gd-textarea-download"
62+
className="text-monospace text-muted w-100 mb-2 rounded-lg border-0 gd-textarea-download"
6363
defaultValue={notes}
6464
id="gd-note-to-copy"
6565
></textarea>

src/components/Footer.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,24 @@ const Footer = (props) => {
1717
type="button"
1818
onClick={props.onToggleLineWrap}
1919
>line wrap is <span className="text-info">{props.lineWrapOn ? 'on' : 'off'}</span></button>
20+
<button
21+
className="btn btn-outline-primary btn-sm ml-2 d-none d-sm-inline"
22+
type="button"
23+
onClick={props.onToggleSpellCheck}
24+
>spellcheck is <span className="text-info">{props.spellCheckOn ? 'on' : 'off'}</span></button>
2025
<button
2126
className="btn btn-outline-primary btn-sm ml-2"
2227
type="button"
2328
onClick={() => { props.onFontSizeChange('INCREASE') }}
2429
><i className="fas fa-search-plus gd-nav-btn-icon"></i><span
25-
className="pl-1 d-none d-sm-inline"
30+
className="pl-1 d-none d-md-inline"
2631
>Zoom In</span></button>
2732
<button
2833
className="btn btn-outline-primary btn-sm ml-2"
2934
type="button"
3035
onClick={() => { props.onFontSizeChange('DECREASE') }}
3136
><i className="fas fa-search-minus gd-nav-btn-icon"></i><span
32-
className="pl-1 d-none d-sm-inline"
37+
className="pl-1 d-none d-md-inline"
3338
>Zoom Out</span></button>
3439
</div>
3540
<div className="d-flex flex-row align-items-center">

src/components/Upload.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const Upload = () => {
103103
<p>Your upload is complete!</p>) : (<p>Paste notes and click Overwrite or Append</p>)
104104
)}
105105
<textarea
106-
className="text-monospace text-muted w-100 mb-2 gd-textarea-upload"
106+
className="text-monospace text-muted w-100 mb-2 rounded-lg border-0 gd-textarea-upload"
107107
ref={textArea}
108108
value={notesContent}
109109
onChange={handleNotesChange}

0 commit comments

Comments
 (0)