Update README.md

README.md

@@ -23,6 +23,17 @@ You may download **MaterialDesignWidgetsDemo** to see how its used in your app.
 - Swift 5.0
 - iOS 11.0+
 
+## Installation
+
+MaterialDesignWidgets is available through [CocoaPods](http://cocoapods.org). To install
+it, simply add the following line to your Podfile:
+
+```
+$ pod 'MaterialDesignWidgets'
+```
+
+If you don't use CocoaPods, you can download the entire project then drag and drop all the classes and use them in your project.
+
 ## Usage
 
 ### Buttons
@@ -37,7 +48,7 @@ let btnSample2 = MaterialButton(text: "Sample2", textColor: .black, bgColor: .wh
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/button-light.gif" alt="System Default" width="350"/> | <img src="gif/button-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/button-light.gif" alt="Button" width="350"/> | <img src="gif/button-dark.gif" alt="Button Dark" width="350"/> | 
 
 #### Loading Button
 ```swift
@@ -51,15 +62,15 @@ loadingBtn.addTarget(self, action: #selector(tapLoadingButton(sender:)), for: .t
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/loadingButton-light.gif" alt="System Default" width="350"/> | <img src="gif/loadingButton-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/loadingbutton-light.gif" alt="Loading Button" width="350"/> | <img src="gif/loadingbutton-dark.gif" alt="Loading Button Dark" width="350"/> | 
 
 #### Shadow Button
 ```swift
 let btnShadow = MaterialButton(text: "Shadow Button", cornerRadius: 15.0, withShadow: true)
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/shadowButton-light.gif" alt="System Default" width="350"/> | <img src="gif/shadowButton-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/shadowButton-light.gif" alt="Shadow Button" width="350"/> | <img src="gif/shadowButton-dark.gif" alt="Shadow Button Dark" width="350"/> | 
 
 #### Vertical Aligned Button
 ```swift
@@ -68,7 +79,7 @@ let btnV = MaterialVerticalButton(icon: img, title: "Fill", foregroundColor: .bl
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/verticalButton-light.gif" alt="System Default" width="350"/> | <img src="gif/verticalButton-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/verticalButton-light.gif" alt="Vertical Aligned Button" width="350"/> | <img src="gif/verticalButton-dark.gif" alt="Vertical Aligned Button Dark" width="350"/> | 
 
 ### Segmented Control
 >  Required File - **MaterialSegmentedControl.swift**
@@ -82,31 +93,31 @@ sgFilled.setCornerBorder(cornerRadius: 18.0)
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/segmentFill-light.gif" alt="System Default" width="350"/> | <img src="gif/segmentFill-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/segmentFill-light.gif" alt="Segmented Control Filled" width="350"/> | <img src="gif/segmentFill-dark.gif" alt="Segmented Control Filled Dark" width="350"/> | 
 
 #### Outline
 ```swift
 let sgOutline = MaterialSegmentedControl(selectorStyle: .outline, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/segmentOutline-light.gif" alt="System Default" width="350"/> | <img src="gif/segmentOutline-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/segmentOutline-light.gif" alt="Segmented Control Outline" width="350"/> | <img src="gif/segmentOutline-dark.gif" alt="Segmented Control Outline Dark" width="350"/> | 
 
 #### Line Text
 ```swift
 let sgLine = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .black, bgColor: .white)
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/segmentLineText-light.gif" alt="System Default" width="350"/> | <img src="gif/segmentLineText-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/segmentLineText-light.gif" alt="Segmented Control Line Text" width="350"/> | <img src="gif/segmentLineText-dark.gif" alt="Segmented Control Line Text Dark" width="350"/> | 
 
 #### Line Icon
 ```swift
 let sgLineIcon = MaterialSegmentedControl(selectorStyle: .line, fgColor: .black, selectedFgColor: .black, selectorColor: .gray, bgColor: .white)
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/segmentLineIcon-light.gif" alt="System Default" width="350"/> | <img src="gif/segmentLineIcon-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/segmentLineIcon-light.gif" alt="Segmented Control Line Icon" width="350"/> | <img src="gif/segmentLineIcon-dark.gif" alt="Segmented Control Line Icon Dark" width="350"/> | 
 
 #### Append Normal Segment
 ```swift
@@ -137,7 +148,7 @@ let textField = MaterialTextField(hint: "TextField", textColor: .black, bgColor:
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/textField-light.gif" alt="System Default" width="350"/> | <img src="gif/textField-dark.gif" alt="System Default Dark" width="350"/> | 
+| <img src="gif/textField-light.gif" alt="TextField" width="350"/> | <img src="gif/textField-dark.gif" alt="TextField Dark" width="350"/> | 
 
 ### Loading Indicator
 > Required file - **MaterialLoadingIndicator.swift**
@@ -149,18 +160,7 @@ indicatorGray.startAnimating()
 ```
 | Light mode |  Dark mode |
 |:--:| :--:|
-| <img src="gif/loading-light.gif" alt="System Default" width="350"/> | <img src="gif/loading-dark.gif" alt="System Default Dark" width="350"/> | 
-
-## Installation
-
-MaterialDesignWidgets is available through [CocoaPods](http://cocoapods.org). To install
-it, simply add the following line to your Podfile:
-
-```
-$ pod 'MaterialDesignWidgets'
-```
-
-If you don't use CocoaPods, you can download the entire project then drag and drop all the classes and use them in your project.
+| <img src="gif/loading-light.gif" alt="Loading Indicator" width="350"/> | <img src="gif/loading-dark.gif" alt="Loading Indicator" width="350"/> | 
 
 ## Credits
 * [Material Design](https://material.io/design/)